<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#333">
    <title>Material Style</title>
    <meta name="description" content="Material Style Theme">
    <link rel="shortcut icon" href="assets/img/favicon-v=3.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="assets/css/preload.min.css">
    <link rel="stylesheet" href="assets/css/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.light-blue-500.min.css">
    <link rel="stylesheet" href="assets/css/width-boxed.min.css" id="ms-boxed" disabled="">
    <!--[if lt IE 9]>
        <script src="assets/js/html5shiv.min.js"></script>
        <script src="assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="javascript:void(0)" class="ms-conf-btn ms-configurator-btn btn-circle btn-circle-raised btn-circle-primary animated rubberBand">
      <i class="fa fa-gears"></i>
    </a>
    <div id="ms-configurator" class="ms-configurator">
      <div class="ms-configurator-title">
        <h3>
          <i class="fa fa-gear"></i> Theme Configurator</h3>
        <a href="javascript:void(0);" class="ms-conf-btn withripple">
          <i class="zmdi zmdi-close"></i>
        </a>
      </div>
      <div class="panel-group" id="accordion_conf" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-color">
            <h4 class="panel-title">
              <a role="button" class="withripple" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-collapse-conf-1" aria-expanded="true" aria-controls="ms-collapse-conf-1">
                <i class="zmdi zmdi-invert-colors"></i> Color Selector </a>
            </h4>
          </div>
          <div id="ms-collapse-conf-1" class="card-collapse collapse show" role="tabpanel" aria-labelledby="ms-conf-header-color">
            <div class="panel-body">
              <div id="color-options" class="ms-colors-container">
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary red" data-color="red">red</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary pink" data-color="pink">pink</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary purple" data-color="purple">purple</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary deep-purple" data-color="deep-purple">deep-purple</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary indigo" data-color="indigo">indigo</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary blue" data-color="blue">blue</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary light-blue active" data-color="light-blue">light-blue</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary cyan" data-color="cyan">cyan</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary teal" data-color="teal">teal</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary green" data-color="green">green</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary light-green" data-color="light-green">light-green</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary lime" data-color="lime">lime</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary yellow" data-color="yellow">yellow</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary amber" data-color="amber">amber</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary orange" data-color="orange">orange</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary deep-orange" data-color="deep-orange">deep-orange</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary brown" data-color="brown">brown</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary grey" data-color="grey">grey</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary blue-grey" data-color="blue-grey">blue-grey</a>
              </div>
              <div id="grad-options" class="ms-color-shine">
                <h4 class="no-mb text-center">Color Brightness</h4>
                <span>300</span>
                <span>400</span>
                <span>500</span>
                <span>600</span>
                <span>700</span>
                <span>800</span>
                <a href="javascript:void(0)" data-shine=300 class="ms-color-box grad c300 light-blue">300</a>
                <a href="javascript:void(0)" data-shine=400 class="ms-color-box grad c400 light-blue">400</a>
                <a href="javascript:void(0)" data-shine=500 class="ms-color-box grad c500 light-blue active">500</a>
                <a href="javascript:void(0)" data-shine=600 class="ms-color-box grad c600 light-blue">600</a>
                <a href="javascript:void(0)" data-shine=700 class="ms-color-box grad c700 light-blue">700</a>
                <a href="javascript:void(0)" data-shine=800 class="ms-color-box grad c800 light-blue">800</a>
              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-headers">
            <h4 class="panel-title">
              <a class="collapsed withripple" role="button" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-collapse-conf-2" aria-expanded="false" aria-controls="ms-collapse-conf-2">
                <i class="zmdi zmdi-view-compact"></i> Header Styles </a>
            </h4>
          </div>
          <div id="ms-collapse-conf-2" class="card-collapse collapse" role="tabpanel" aria-labelledby="ms-conf-header-headers">
            <div class="panel-body">
              <!--<h5>Preset Options</h5>
                    <form class="form-inverse ms-conf-radio">
                        <div class="form-group">
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">Default Style
                                </label>
                            </div>
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Pure Material
                                </label>
                            </div>
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">Navbar Mode
                                </label>
                            </div>
                        </div>
                    </form>
                    <h5>Custom Header</h5>-->
              <h6>Header Options</h6>
              <form class="form-inverse ms-conf-radio" id="header-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="whiteHeader" value="white" checked="cheked"> Light Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="primaryHeader" value="primary"> Primary Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="darkHeader" value="dark"> Dark Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="noHeader" value="hidden"> No Header (Navbar Mode) </label>
                  </div>
                </div>
              </form>
              <h6>Navbar Options</h6>
              <form class="form-inverse ms-conf-radio" id="navbar-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="whiteNavbar" value="white" checked=""> Light Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="primaryNavbar" value="primary"> Primary Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="darkNavbar" value="dark"> Dark Color </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-container">
            <h4 class="panel-title">
              <a class="collapsed withripple" role="button" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-conf-collapse-3" aria-expanded="false" aria-controls="ms-conf-collapse-3">
                <i class="zmdi zmdi-grid"></i> Container Options </a>
            </h4>
          </div>
          <div id="ms-conf-collapse-3" class="card-collapse collapse" role="tabpanel" aria-labelledby="ms-conf-header-container">
            <div class="panel-body">
              <form class="form-inverse ms-conf-radio" id="boxed-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customWidth" id="fullWidth" value="full" checked=""> Full Width </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customWidth" id="boxedWidth" value="boxed"> Boxed Mode </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="ms-preload" class="ms-preload">
      <div id="status">
        <div class="spinner">
          <div class="dot1"></div>
          <div class="dot2"></div>
        </div>
      </div>
    </div>
    <div class="ms-site-container">
      <!-- Modal -->
      <div class="modal modal-primary" id="ms-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog animated zoomIn animated-3x" role="document">
          <div class="modal-content">
            <div class="modal-header d-block shadow-2dp no-pb">
              <button type="button" class="close d-inline pull-right mt-2" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">
                  <i class="zmdi zmdi-close"></i>
                </span>
              </button>
              <div class="modal-title text-center">
                <span class="ms-logo ms-logo-white ms-logo-sm mr-1">M</span>
                <h3 class="no-m ms-site-title">Material
                  <span>Style</span>
                </h3>
              </div>
              <div class="modal-header-tabs">
                <ul class="nav nav-tabs nav-tabs-full nav-tabs-3 nav-tabs-primary" role="tablist">
                  <li class="nav-item" role="presentation">
                    <a href="#ms-login-tab" aria-controls="ms-login-tab" role="tab" data-toggle="tab" class="nav-link active withoutripple">
                      <i class="zmdi zmdi-account"></i> Login</a>
                  </li>
                  <li class="nav-item" role="presentation">
                    <a href="#ms-register-tab" aria-controls="ms-register-tab" role="tab" data-toggle="tab" class="nav-link withoutripple">
                      <i class="zmdi zmdi-account-add"></i> Register</a>
                  </li>
                  <li class="nav-item" role="presentation">
                    <a href="#ms-recovery-tab" aria-controls="ms-recovery-tab" role="tab" data-toggle="tab" class="nav-link withoutripple">
                      <i class="zmdi zmdi-key"></i> Recovery Pass</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="modal-body">
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade active show" id="ms-login-tab">
                  <form autocomplete="off">
                    <fieldset>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-account"></i>
                          </span>
                          <label class="control-label" for="ms-form-user">Username</label>
                          <input type="text" id="ms-form-user" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-lock"></i>
                          </span>
                          <label class="control-label" for="ms-form-pass">Password</label>
                          <input type="password" id="ms-form-pass" class="form-control"> </div>
                      </div>
                      <div class="row mt-2">
                        <div class="col-md-6">
                          <div class="form-group no-mt">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox"> Remember Me </label>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <button class="btn btn-raised btn-primary pull-right">Login</button>
                        </div>
                      </div>
                    </fieldset>
                  </form>
                  <div class="text-center">
                    <h3>Login with</h3>
                    <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-facebook">
                      <i class="zmdi zmdi-facebook"></i> Facebook</a>
                    <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-twitter">
                      <i class="zmdi zmdi-twitter"></i> Twitter</a>
                    <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-google">
                      <i class="zmdi zmdi-google"></i> Google</a>
                  </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="ms-register-tab">
                  <form>
                    <fieldset>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-account"></i>
                          </span>
                          <label class="control-label" for="ms-form-user-new">Username</label>
                          <input type="text" id="ms-form-user-new" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-email"></i>
                          </span>
                          <label class="control-label" for="ms-form-email-new">Email</label>
                          <input type="email" id="ms-form-email-new" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-lock"></i>
                          </span>
                          <label class="control-label" for="ms-form-pass-new">Password</label>
                          <input type="password" id="ms-form-pass-new" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-lock"></i>
                          </span>
                          <label class="control-label" for="ms-form-pass-re-new">Re-type Password</label>
                          <input type="password" id="ms-form-pass-re-new" class="form-control"> </div>
                      </div>
                      <button class="btn btn-raised btn-block btn-primary">Register Now</button>
                    </fieldset>
                  </form>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="ms-recovery-tab">
                  <fieldset>
                    <div class="form-group label-floating">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <i class="zmdi zmdi-account"></i>
                        </span>
                        <label class="control-label" for="ms-form-user-re">Username</label>
                        <input type="text" id="ms-form-user-re" class="form-control"> </div>
                    </div>
                    <div class="form-group label-floating">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <i class="zmdi zmdi-email"></i>
                        </span>
                        <label class="control-label" for="ms-form-email-re">Email</label>
                        <input type="email" id="ms-form-email-re" class="form-control"> </div>
                    </div>
                    <button class="btn btn-raised btn-block btn-primary">Send Password</button>
                  </fieldset>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <header class="ms-header ms-header-primary">
        <!--ms-header-primary-->
        <div class="container container-full">
          <div class="ms-title">
            <a href="index.html">
              <!-- <img src="assets/img/demo/logo-header.png" alt=""> -->
              <span class="ms-logo animated zoomInDown animation-delay-5">M</span>
              <h1 class="animated fadeInRight animation-delay-6">Material
                <span>Style</span>
              </h1>
            </a>
          </div>
          <div class="header-right">
            <div class="share-menu">
              <ul class="share-menu-list">
                <li class="animated fadeInRight animation-delay-3">
                  <a href="javascript:void(0)" class="btn-circle btn-google">
                    <i class="zmdi zmdi-google"></i>
                  </a>
                </li>
                <li class="animated fadeInRight animation-delay-2">
                  <a href="javascript:void(0)" class="btn-circle btn-facebook">
                    <i class="zmdi zmdi-facebook"></i>
                  </a>
                </li>
                <li class="animated fadeInRight animation-delay-1">
                  <a href="javascript:void(0)" class="btn-circle btn-twitter">
                    <i class="zmdi zmdi-twitter"></i>
                  </a>
                </li>
              </ul>
              <a href="javascript:void(0)" class="btn-circle btn-circle-primary animated zoomInDown animation-delay-7">
                <i class="zmdi zmdi-share"></i>
              </a>
            </div>
            <a href="javascript:void(0)" class="btn-circle btn-circle-primary no-focus animated zoomInDown animation-delay-8" data-toggle="modal" data-target="#ms-account-modal">
              <i class="zmdi zmdi-account"></i>
            </a>
            <form class="search-form animated zoomInDown animation-delay-9">
              <input id="search-box" type="text" class="search-input" placeholder="Search..." name="q" />
              <label for="search-box">
                <i class="zmdi zmdi-search"></i>
              </label>
            </form>
            <a href="javascript:void(0)" class="btn-ms-menu btn-circle btn-circle-primary ms-toggle-left animated zoomInDown animation-delay-10">
              <i class="zmdi zmdi-menu"></i>
            </a>
          </div>
        </div>
      </header>
      <nav class="navbar navbar-expand-md  navbar-static ms-navbar ms-navbar-primary">
        <div class="container container-full">
          <div class="navbar-header">
            <a class="navbar-brand" href="index.html">
              <!-- <img src="assets/img/demo/logo-navbar.png" alt=""> -->
              <span class="ms-logo ms-logo-sm">M</span>
              <span class="ms-title">Material
                <strong>Style</strong>
              </span>
            </a>
          </div>
          <div class="collapse navbar-collapse" id="ms-navbar">
            <ul class="navbar-nav">
              <li class="nav-item dropdown active">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="home">Home
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li class="ms-tab-menu">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs ms-tab-menu-left" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" href="#tab-general" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-home"></i> General Purpose</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-landing" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-desktop-windows"></i> Landing pages</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-revolution" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-panorama-horizontal"></i> Slider Revolution</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-shop" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-store"></i> Shop</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-profile" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-account"></i> Professional Profile</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-blog" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-edit"></i> Blog Template</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-magazine" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-flip"></i> Magazine Template</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-app" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-smartphone-iphone"></i> App Pages</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-ads" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-search"></i> Classified Ads</a>
                      </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content ms-tab-menu-right">
                      <div class="tab-pane active" id="tab-general" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="index.html">Default Home</a>
                          </li>
                          <li>
                            <a href="home-generic-2.html">Home Black Slider</a>
                          </li>
                          <li>
                            <a href="home-generic-3.html">Home Browsers Intro</a>
                          </li>
                          <li>
                            <a href="home-generic-4.html">Home Mobile Intro</a>
                          </li>
                          <li>
                            <a href="home-generic-5.html">Home Material Icons</a>
                          </li>
                          <li>
                            <a href="home-generic-6.html">Home Typed Hero</a>
                          </li>
                          <li>
                            <a href="home-generic-7.html">Home Typed Hero 2</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-landing" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-landing.html">Home Landing Intro</a>
                          </li>
                          <li>
                            <a href="home-landing2.html">Home Landing Intro 2</a>
                          </li>
                          <li>
                            <a href="home-landing4.html">Home Landing Intro 3</a>
                          </li>
                          <li>
                            <a href="home-landing3.html">Home Landing Video</a>
                          </li>
                          <li>
                            <a href="home-cv3.html">Home Profile Landing 1</a>
                          </li>
                          <li>
                            <a href="home-cv4.html">Home Profile Landing 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Landing Video 2 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-revolution" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a class="with-badge" href="home-revolution.html">Home Revolution Devices
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                          <li>
                            <a class="with-badge" href="home-revolution2.html">Home Revolution App
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                          <li>
                            <a class="with-badge" href="home-revolution3.html">Home Revolution Video
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                          <li>
                            <a class="with-badge" href="home-revolution4.html">Home Revolution Idea
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-shop" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-shop.html">Home Shop 1</a>
                          </li>
                          <li>
                            <a href="home-shop2.html">Home Shop 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Shop 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Shop 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-profile" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-cv.html">Home Profile 1</a>
                          </li>
                          <li>
                            <a href="home-cv2.html">Home Profile 2</a>
                          </li>
                          <li>
                            <a href="home-cv3.html">Home Profile Landing 1</a>
                          </li>
                          <li>
                            <a href="home-cv4.html">Home Profile Landing 2</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-blog" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-blog.html">Home Blog 1</a>
                          </li>
                          <li>
                            <a href="home-blog2.html">Home Blog 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Blog 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Blog 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-magazine" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-magazine.html">Home Magazine 1</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Magazine 2 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Magazine 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Magazine 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-app" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-app.html">Home App 1</a>
                          </li>
                          <li>
                            <a href="home-app2.html">Home App 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home App 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home App 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-ads" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-class.html">Home Classifieds 1</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Classifieds 2 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Classifieds 3 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="page">Pages
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="dropdown-item has_children">About us &amp; Team</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-about.html">About us Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-about2.html">About us Option 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-about3.html">About us Option 3</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-about4.html">About us Option 4</a>
                      </li>
                      <li class="dropdown-divider"></li>
                      <li>
                        <a class="dropdown-item" href="page-team.html">Our Team Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-team2.html">Our Team Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Form</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="page-contact.html">Contact Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-contact2.html">Contact Option 2</a>
                      </li>
                      <li class="dropdown-divider"></li>
                      <li>
                        <a class="dropdown-item" href="page-login_register.html">Login &amp; Register</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-login.html">Login Full</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-login2.html">Login Integrated</a>
                      </li>
                      <li class="dropdown-divider"></li>
                      <li>
                        <a class="dropdown-item" href="page-login_register2.html">Register Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-register2.html">Register Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Profiles</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-profile.html">User Profile Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-profile2.html">User Profile Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Error</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-404.html">Error 404 Full Page</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-404_2.html">Error 404 Integrated</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-500.html">Error 500 Full Page</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-500_2.html">Error 500 Integrated</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Bussiness &amp; Products</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-testimonial.html">Testimonials</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-clients.html">Our Clients</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-product.html">Products</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-services.html">Services</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Pricing</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-pricing.html">Pricing Box</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-pricing2.html">Pricing Box 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-princing_table.html">Pricing Mega Table</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">FAQ &amp; Support</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-support.html">Support Center</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-faq.html">FAQ Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-faq2.html">FAQ Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Coming Soon</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-coming.html">Coming Soon Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-coming2.html">Coming Soon Option 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-coming3.html">Coming Soon Option 3</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Timeline</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-timeline_left.html">Timeline Left</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-timeline_left2.html">Timeline Left 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-timeline.html">Timeline Center</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Email Templates</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item with-badge" href="page-email.html">Email Template 1
                          <span class="badge badge-success text-right">1.2</span>
                        </a>
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item with-badge" href="page-email2.html">Email Template 2
                          <span class="badge badge-success text-right">1.2</span>
                        </a>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="page-all.html" class="dropdown-link">All Pages</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown dropdown-megamenu-container">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="component">UI Elements
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-megamenu animated fadeIn animated-2x">
                  <li class="container">
                    <div class="row">
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInLeft animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-bold"></i> Bootstrap CSS</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-typography.html">
                                <i class="fa fa-font"></i> Typography</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-headers.html">
                                <i class="fa fa-header"></i> Headers</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-dividers.html">
                                <i class="fa fa-arrows-h"></i> Dividers</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-blockquotes.html">
                                <i class="fa fa-quote-right"></i> Blockquotes</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-forms.html">
                                <i class="fa fa-check-square-o"></i> Forms
                                <span class="badge badge-info pull-right">
                                  <i class="zmdi zmdi-long-arrow-up no-mr"></i> 1.5</span>
                              </a>
                            </li>
                            <li>
                              <a class="withripple" href="component-tables.html">
                                <i class="fa fa-table"></i> Tables</a>
                            </li>
                          </ul>
                        </div>
                        <div class="megamenu-block animated fadeInLeft animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-hand-o-up"></i> Buttons</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-basic-buttons.html">
                                <i class="fa fa-arrow-circle-right"></i> Basic Buttons</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-buttons-components.html">
                                <i class="fa fa-arrow-circle-right"></i> Buttons Components</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-social-buttons.html">
                                <i class="fa fa-arrow-circle-right"></i> Social Buttons
                                <span class="badge badge-info pull-right">
                                  <i class="zmdi zmdi-long-arrow-up no-mr"></i> 1.3</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInLeft animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-list-alt"></i> Basic Components</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-panels.html">
                                <i class="zmdi zmdi-view-agenda"></i> Panels</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-alerts.html">
                                <i class="zmdi zmdi-info"></i> Alerts &amp; Wells</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-badges.html">
                                <i class="zmdi zmdi-tag"></i> Badges &amp; Badges Pills</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-lists.html">
                                <i class="zmdi zmdi-view-list"></i> Lists</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-thumbnails.html">
                                <i class="zmdi zmdi-image-o"></i> Thumbnails</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-carousels.html">
                                <i class="zmdi zmdi-view-carousel"></i> Carousels</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-modals.html">
                                <i class="zmdi zmdi-window-maximize"></i> Modals</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-tooltip.html">
                                <i class="zmdi zmdi-pin-help"></i> Tooltip &amp; Popover</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-progress-bars.html">
                                <i class="zmdi zmdi-view-headline"></i> Progress Bars</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-pagination.html">
                                <i class="zmdi zmdi-n-2-square"></i> Pagination</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-dropdowns.html">
                                <i class="fa fa-info"></i> Dropdowns</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="zmdi zmdi-folder-star-alt"></i> Extra Components</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-cards.html">
                                <i class="zmdi zmdi-card-membership"></i> Cards</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-composite-cards.html">
                                <i class="zmdi zmdi-card-giftcard"></i> Composite Cards</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-counters.html">
                                <i class="zmdi zmdi-n-6-square"></i> Counters</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-audio-video.html">
                                <i class="zmdi zmdi-play-circle"></i> Audio &amp; Video</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-masonry.html">
                                <i class="zmdi zmdi-view-dashboard"></i> Masonry Layer</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-snackbar.html">
                                <i class="zmdi zmdi-notifications-active"></i> SnackBar
                                <span class="badge badge-success pull-right">1.2</span>
                              </a>
                            </li>
                            <li>
                              <a class="withripple" href="component-lightbox.html">
                                <i class="zmdi zmdi-collection-image-o"></i> Lightbox
                                <span class="badge badge-success pull-right">1.5</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="zmdi zmdi-tab"></i> Collapses &amp; Tabs</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-collapses.html">
                                <i class="zmdi zmdi-view-day"></i> Collapses</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-horizontal-tabs.html">
                                <i class="zmdi zmdi-tab"></i> Horitzontal Tabs</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-vertical-tabs.html">
                                <i class="zmdi zmdi-menu"></i> Vertical Tabs</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-briefcase"></i> Icons</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-icons-basic.html">
                                <i class="fa fa-arrow-circle-right"></i> Basic Icons</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-fontawesome.html">
                                <i class="fa fa-arrow-circle-right"></i> Font Awesome</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-iconic.html">
                                <i class="fa fa-arrow-circle-right"></i> Material Design Iconic</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-glyphicons.html">
                                <i class="fa fa-arrow-circle-right"></i> Glyphicons</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-ionicons.html">
                                <i class="fa fa-arrow-circle-right"></i> Ionicons
                                <span class="badge badge-success pull-right">2.0</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-area-chart"></i> Charts</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-charts-circle.html">
                                <i class="zmdi zmdi-chart-donut"></i> Circle Charts</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-charts-bar.html">
                                <i class="fa fa-bar-chart"></i> Bars Charts</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-charts-line.html">
                                <i class="fa fa-line-chart"></i> Line Charts</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-charts-more.html">
                                <i class="fa fa-pie-chart"></i> More Charts</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="blog">Blog
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="blog-sidebar.html">
                      <i class="zmdi zmdi-view-compact"></i> Blog Sidebar 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-sidebar2.html">
                      <i class="zmdi zmdi-view-compact"></i> Blog Sidebar 2</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-masonry.html">
                      <i class="zmdi zmdi-view-dashboard"></i> Blog Masonry 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-masonry2.html">
                      <i class="zmdi zmdi-view-dashboard"></i> Blog Masonry 2</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-full.html">
                      <i class="zmdi zmdi zmdi-view-stream"></i> Blog Full Page 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-full2.html">
                      <i class="zmdi zmdi zmdi-view-stream"></i> Blog Full Page 2</a>
                  </li>
                  <li class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item" href="blog-post.html">
                      <i class="zmdi zmdi-file-text"></i> Blog Post 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-post2.html">
                      <i class="zmdi zmdi-file-text"></i> Blog Post 2</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-8" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="portfolio">Portfolio
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_sidebar.html">
                      <i class="zmdi zmdi-view-compact"></i> Portfolio Sidebar Filters</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_topbar.html">
                      <i class="zmdi zmdi-view-agenda"></i> Portfolio Topbar Filters</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_sidebar_fluid.html">
                      <i class="zmdi zmdi-view-compact"></i> Portfolio Sidebar Fluid</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_topbar_fluid.html">
                      <i class="zmdi zmdi-view-agenda"></i> Portfolio Topbar Fluid</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-cards.html">
                      <i class="zmdi zmdi-card-membership"></i> Porfolio Cards</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-masonry.html">
                      <i class="zmdi zmdi-view-dashboard"></i> Porfolio Masonry</a>
                  </li>
                  <li>
                    <a class="dropdown-item with-badge" href="portfolio-gallery.html">
                      <i class="zmdi zmdi-apps"></i> Picture Gallery
                      <span class="badge badge-success text-right">1.5</span>
                    </a>
                  </li>
                  <li class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item" href="portfolio-item.html">
                      <i class="zmdi zmdi-collection-item-1"></i> Portfolio Item 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-item2.html">
                      <i class="zmdi zmdi-collection-item-2"></i> Portfolio Item 2</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-9" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="ecommerce">E-Commerce
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="ecommerce-filters.html">E-Commerce Sidebar</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-filters-full.html">E-Commerce Sidebar Full</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-filters-full2.html">E-Commerce Topbar Full</a>
                  </li>
                  <li class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-item.html">E-Commerce Item</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-cart.html">E-Commerce Cart</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <a href="javascript:void(0)" class="ms-toggle-left btn-navbar-menu">
            <i class="zmdi zmdi-menu"></i>
          </a>
        </div>
        <!-- container -->
      </nav>
      <div class="material-background"></div>
      <div class="container container-full">
        <div class="ms-paper">
          <div class="row">
            <div class="col-lg-3 ms-paper-menu-left-container">
              <div class="ms-paper-menu-left">
                <h3 class="ms-paper-menu-title">
                  <i class="zmdi zmdi-apps"></i> Components Menu
                  <a role="button" data-toggle="collapse" href="#collapseMenu" aria-expanded="false" aria-controls="collapseMenu" class="withripple">
                    <i class="zmdi zmdi-menu"></i>
                  </a>
                </h3>
                <div class="panel-menu collapse" id="collapseMenu">
                  <ul class="panel-group ms-collapse-nav" id="components-nav" role="tablist" aria-multiselectable="true">
                    <li class="card" role="tab" id="e1">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c1" aria-expanded="true" aria-controls="c1" class="collapsed withripple">
                        <i class="fa fa-bold"></i> Bootstrap CSS</a>
                      <ul id="c1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e1">
                        <li>
                          <a class="withripple" href="component-typography.html">
                            <i class="fa fa-font"></i> Typography</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-headers.html">
                            <i class="fa fa-header"></i> Headers</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-dividers.html">
                            <i class="fa fa-arrows-h"></i> Dividers</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-blockquotes.html">
                            <i class="fa fa-quote-right"></i> Blockquotes</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-forms.html">
                            <i class="fa fa-check-square-o"></i> Forms</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-tables.html">
                            <i class="fa fa-table"></i> Tables</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e2">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c2" aria-expanded="true" aria-controls="c2" class="collapsed withripple">
                        <i class="fa fa-hand-o-up"></i> Buttons</a>
                      <ul id="c2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e2">
                        <li>
                          <a class="withripple" href="component-basic-buttons.html">
                            <i class="fa fa-arrow-circle-right"></i> Basic Buttons</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-buttons-components.html">
                            <i class="fa fa-arrow-circle-right"></i> Buttons Components</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-social-buttons.html">
                            <i class="fa fa-arrow-circle-right"></i> Social Buttons</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e3">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c3" aria-expanded="true" aria-controls="c3" class="withripple">
                        <i class="fa fa-briefcase"></i> Icons</a>
                      <ul id="c3" class="panel-collapse collapse show" role="tabpanel" aria-labelledby="e3">
                        <li>
                          <a class="withripple" href="component-icons-basic.html">
                            <i class="fa fa-arrow-circle-right"></i> Basic Icons</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-fontawesome.html">
                            <i class="fa fa-arrow-circle-right"></i> Font Awesome</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-iconic.html">
                            <i class="fa fa-arrow-circle-right"></i> Material Design Iconic</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-glyphicons.html">
                            <i class="fa fa-arrow-circle-right"></i> Glyphicons</a>
                        </li>
                        <li>
                          <a class="withripple active" href="component-icons-ionicons.html">
                            <i class="fa fa-arrow-circle-right"></i> Ionicons</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e4">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c4" aria-expanded="true" aria-controls="c4" class="collapsed withripple">
                        <i class="fa fa-list-alt"></i> Basic Components</a>
                      <ul id="c4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e4">
                        <li>
                          <a class="withripple" href="component-panels.html">
                            <i class="zmdi zmdi-view-agenda"></i> Panels</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-alerts.html">
                            <i class="zmdi zmdi-info"></i> Alerts &amp; Wells</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-badges.html">
                            <i class="zmdi zmdi-tag"></i> Badges &amp; Badges Pills</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-lists.html">
                            <i class="zmdi zmdi-view-list"></i> Lists</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-thumbnails.html">
                            <i class="zmdi zmdi-image-o"></i> Thumbnails</a>
                          </a>
                        </li>
                        <li>
                          <a class="withripple" href="component-carousels.html">
                            <i class="zmdi zmdi-view-carousel"></i> Carousels</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-modals.html">
                            <i class="zmdi zmdi-window-maximize"></i> Modals</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-tooltip.html">
                            <i class="zmdi zmdi-pin-help"></i> Tooltip &amp; Popover</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-progress-bars.html">
                            <i class="zmdi zmdi-view-headline"></i> Progress Bars</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-pagination.html">
                            <i class="zmdi zmdi-n-2-square"></i> Pagination</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-dropdowns.html">
                            <i class="fa fa-info"></i> Dropdowns</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e5">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c5" aria-expanded="true" aria-controls="c5" class="collapsed withripple">
                        <i class="zmdi zmdi-folder-star-alt"></i> Extra Components</a>
                      <ul id="c5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e5">
                        <li>
                          <a class="withripple" href="component-cards.html">
                            <i class="zmdi zmdi-card-membership"></i> Cards</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-composite-cards.html">
                            <i class="zmdi zmdi-card-giftcard"></i> Composite Cards</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-counters.html">
                            <i class="zmdi zmdi-n-6-square"></i> Counters</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-audio-video.html">
                            <i class="zmdi zmdi-play-circle"></i> Audio &amp; Video</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-masonry.html">
                            <i class="zmdi zmdi-apps"></i> Masonry Layer</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-snackbar.html">
                            <i class="zmdi zmdi-notifications-active"></i> SnackBar</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-lightbox.html">
                            <i class="zmdi zmdi-collection-image-o"></i> Lightbox</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e6">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c6" aria-expanded="true" aria-controls="c6" class="collapsed withripple">
                        <i class="zmdi zmdi-tab"></i> Collapses &amp; Tabs</a>
                      <ul id="c6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e6">
                        <li>
                          <a class="withripple" href="component-collapses.html">
                            <i class="zmdi zmdi-view-day"></i> Collapses</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-horizontal-tabs.html">
                            <i class="zmdi zmdi-tab"></i> Horitzontal Tabs</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-vertical-tabs.html">
                            <i class="zmdi zmdi-menu"></i> Vertical Tabs</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e7">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c7" aria-expanded="true" aria-controls="c7" class="collapsed withripple">
                        <i class="fa fa-area-chart"></i> Charts</a>
                      <ul id="c7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e7">
                        <li>
                          <a class="withripple" href="component-charts-circle.html">
                            <i class<i class="zmdi zmdi-chart-donut"></i> Circle Charts</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-charts-bar.html">
                            <i class="fa fa-bar-chart"></i> Bars Charts</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-charts-line.html">
                            <i class="fa fa-line-chart"></i> Line Charts</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-charts-more.html">
                            <i class="fa fa-pie-chart"></i> More Charts</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                  <!-- ms-collapse-nav -->
                </div>
              </div>
            </div>
            <!-- col-lg-3 -->
            <div class="col-lg-9 ms-paper-content-container">
              <div class="ms-paper-content">
                <h1>Ionicons</h1>
                <section class="ms-component-section">
                  <p class="alert alert-light alert-info">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <i class="fa fa-flag"></i>All icons in
                    <strong>Ionicons</strong> available with Material Style Template! If you want more information about how to use them, you can visit
                    <a href="http://ionicons.com/">official site</a>. </p>
                  <h2 class="color-primary mt-4 mb-2">Default icons pack</h2>
                  <ul class="ionic-list">
                    <li class="ion-ionic" data-pack="default" data-tags="badass, framework, sexy, hawt"></li>
                    <li class="ion-arrow-up-a" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-right-a" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-down-a" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-left-a" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-up-b" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-right-b" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-down-b" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-left-b" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-up-c" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-right-c" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-down-c" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-left-c" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-return-right" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-return-left" data-pack="default" data-tags=""></li>
                    <li class="ion-arrow-swap" data-pack="default" data-tags="switch, flip"></li>
                    <li class="ion-arrow-shrink" data-pack="default" data-tags="pinch"></li>
                    <li class="ion-arrow-expand" data-pack="default" data-tags="fullscreen"></li>
                    <li class="ion-arrow-move" data-pack="default" data-tags="drag"></li>
                    <li class="ion-arrow-resize" data-pack="default" data-tags="drag"></li>
                    <li class="ion-chevron-up" data-pack="default" data-tags="arrow, up"></li>
                    <li class="ion-chevron-right" data-pack="default" data-tags="arrow, right"></li>
                    <li class="ion-chevron-down" data-pack="default" data-tags="arrow, down"></li>
                    <li class="ion-chevron-left" data-pack="default" data-tags="arrow, left"></li>
                    <li class="ion-navicon-round" data-pack="default" data-tags="menu, hamburger, slide menu"></li>
                    <li class="ion-navicon" data-pack="default" data-tags="menu, hamburger, slide menu"></li>
                    <li class="ion-drag" data-pack="default" data-tags="reorder, move, drag"></li>
                    <li class="ion-log-in" data-pack="default" data-tags="sign in, "></li>
                    <li class="ion-log-out" data-pack="default" data-tags="sign out"></li>
                    <li class="ion-checkmark-round" data-pack="default" data-tags="complete, finished, success, on"></li>
                    <li class="ion-checkmark" data-pack="default" data-tags="complete, finished, success, on"></li>
                    <li class="ion-checkmark-circled" data-pack="default" data-tags="complete, finished, success, on"></li>
                    <li class="ion-close-round" data-pack="default" data-tags="delete, trash, kill, x"></li>
                    <li class="ion-close" data-pack="default" data-tags="delete, trash, kill, x"></li>
                    <li class="ion-close-circled" data-pack="default" data-tags="delete, trash, kill, x"></li>
                    <li class="ion-plus-round" data-pack="default" data-tags="add, include, new, invite, +"></li>
                    <li class="ion-plus" data-pack="default" data-tags="add, include, new, invite, +"></li>
                    <li class="ion-plus-circled" data-pack="default" data-tags="add, include, new, invite, +"></li>
                    <li class="ion-minus-round" data-pack="default" data-tags="hide, remove, minimize, -"></li>
                    <li class="ion-minus" data-pack="default" data-tags="hide, remove, minimize, -"></li>
                    <li class="ion-minus-circled" data-pack="default" data-tags="hide, remove, minimize, -"></li>
                    <li class="ion-information" data-pack="default" data-tags="help, more, tooltip"></li>
                    <li class="ion-information-circled" data-pack="default" data-tags="help, more, tooltip"></li>
                    <li class="ion-help" data-pack="default" data-tags="question, ?"></li>
                    <li class="ion-help-circled" data-pack="default" data-tags="question, ?"></li>
                    <li class="ion-backspace-outline" data-pack="default" data-tags="delete, remove, back"></li>
                    <li class="ion-backspace" data-pack="default" data-tags="delete, remove, back"></li>
                    <li class="ion-help-buoy" data-pack="default" data-tags="question, ?"></li>
                    <li class="ion-asterisk" data-pack="default" data-tags="favorite, mark, star"></li>
                    <li class="ion-alert" data-pack="default" data-tags="attention, warning, notice, !, exclamation"></li>
                    <li class="ion-alert-circled" data-pack="default" data-tags="attention, warning, notice, !, exclamation"></li>
                    <li class="ion-refresh" data-pack="default" data-tags="reload, renew"></li>
                    <li class="ion-loop" data-pack="default" data-tags="refresh"></li>
                    <li class="ion-shuffle" data-pack="default" data-tags="random"></li>
                    <li class="ion-home" data-pack="default" data-tags="house"></li>
                    <li class="ion-search" data-pack="default" data-tags="magnifying glass"></li>
                    <li class="ion-flag" data-pack="default" data-tags="favorite, mark, star"></li>
                    <li class="ion-star" data-pack="default" data-tags="favorite"></li>
                    <li class="ion-heart" data-pack="default" data-tags="love"></li>
                    <li class="ion-heart-broken" data-pack="default" data-tags="love"></li>
                    <li class="ion-gear-a" data-pack="default" data-tags="settings, options, cog"></li>
                    <li class="ion-gear-b" data-pack="default" data-tags="settings, options, cog"></li>
                    <li class="ion-toggle-filled" data-pack="default" data-tags="settings, options, switch"></li>
                    <li class="ion-toggle" data-pack="default" data-tags="settings, options, switch"></li>
                    <li class="ion-settings" data-pack="default" data-tags="options, tools"></li>
                    <li class="ion-wrench" data-pack="default" data-tags="settings, options, tools"></li>
                    <li class="ion-hammer" data-pack="default" data-tags="settings, options, tools"></li>
                    <li class="ion-edit" data-pack="default" data-tags="change, update, write, type, pencil"></li>
                    <li class="ion-trash-a" data-pack="default" data-tags="delete, remove, dump"></li>
                    <li class="ion-trash-b" data-pack="default" data-tags="delete, remove, dump"></li>
                    <li class="ion-document" data-pack="default" data-tags="paper, file"></li>
                    <li class="ion-document-text" data-pack="default" data-tags="paper, file"></li>
                    <li class="ion-clipboard" data-pack="default" data-tags="write"></li>
                    <li class="ion-scissors" data-pack="default" data-tags="cut"></li>
                    <li class="ion-funnel" data-pack="default" data-tags="sort"></li>
                    <li class="ion-bookmark" data-pack="default" data-tags="favorite, tag, save"></li>
                    <li class="ion-email" data-pack="default" data-tags="snail, mail, inbox"></li>
                    <li class="ion-email-unread" data-pack="default" data-tags="snail, mail, inbox"></li>
                    <li class="ion-folder" data-pack="default" data-tags="snail, mail"></li>
                    <li class="ion-filing" data-pack="default" data-tags="mail"></li>
                    <li class="ion-archive" data-pack="default" data-tags="mail"></li>
                    <li class="ion-reply" data-pack="default" data-tags="mail, undo"></li>
                    <li class="ion-reply-all" data-pack="default" data-tags="mail"></li>
                    <li class="ion-forward" data-pack="default" data-tags="mail, redo"></li>
                    <li class="ion-share" data-pack="default" data-tags="outbound"></li>
                    <li class="ion-paper-airplane" data-pack="default" data-tags="outbound, mail, letter, send"></li>
                    <li class="ion-link" data-pack="default" data-tags="chain, anchor, href, attach"></li>
                    <li class="ion-paperclip" data-pack="default" data-tags="attach"></li>
                    <li class="ion-compose" data-pack="default" data-tags="write, compose, type"></li>
                    <li class="ion-briefcase" data-pack="default" data-tags="store, organize"></li>
                    <li class="ion-medkit" data-pack="default" data-tags="health"></li>
                    <li class="ion-at" data-pack="default" data-tags="@"></li>
                    <li class="ion-pound" data-pack="default" data-tags="hashtag, #"></li>
                    <li class="ion-quote" data-pack="default" data-tags="chat, quotation"></li>
                    <li class="ion-cloud" data-pack="default" data-tags="storage"></li>
                    <li class="ion-upload" data-pack="default" data-tags="storage, cloud"></li>
                    <li class="ion-more" data-pack="default" data-tags="circles"></li>
                    <li class="ion-grid" data-pack="default" data-tags="menu"></li>
                    <li class="ion-calendar" data-pack="default" data-tags="date, time, month, year"></li>
                    <li class="ion-clock" data-pack="default" data-tags="time, watch, hours, minutes, seconds"></li>
                    <li class="ion-compass" data-pack="default" data-tags="location, directions, navigation"></li>
                    <li class="ion-pinpoint" data-pack="default" data-tags="gps, navigation"></li>
                    <li class="ion-pin" data-pack="default" data-tags="gps, navigation"></li>
                    <li class="ion-navigate" data-pack="default" data-tags="gps, location pin"></li>
                    <li class="ion-location" data-pack="default" data-tags="gps, navigation, pin"></li>
                    <li class="ion-map" data-pack="default" data-tags="gps, navigation, pin"></li>
                    <li class="ion-lock-combination" data-pack="default" data-tags="padlock, security"></li>
                    <li class="ion-locked" data-pack="default" data-tags="padlock, security"></li>
                    <li class="ion-unlocked" data-pack="default" data-tags="padlock, security"></li>
                    <li class="ion-key" data-pack="default" data-tags="access"></li>
                    <li class="ion-arrow-graph-up-right" data-pack="default" data-tags="stats"></li>
                    <li class="ion-arrow-graph-down-right" data-pack="default" data-tags="stats"></li>
                    <li class="ion-arrow-graph-up-left" data-pack="default" data-tags="stats"></li>
                    <li class="ion-arrow-graph-down-left" data-pack="default" data-tags="stats"></li>
                    <li class="ion-stats-bars" data-pack="default" data-tags="data"></li>
                    <li class="ion-connection-bars" data-pack="default" data-tags="data, stats"></li>
                    <li class="ion-pie-graph" data-pack="default" data-tags="stats"></li>
                    <li class="ion-chatbubble" data-pack="default" data-tags="talk"></li>
                    <li class="ion-chatbubble-working" data-pack="default" data-tags="talk"></li>
                    <li class="ion-chatbubbles" data-pack="default" data-tags="talk"></li>
                    <li class="ion-chatbox" data-pack="default" data-tags="talk"></li>
                    <li class="ion-chatbox-working" data-pack="default" data-tags="talk"></li>
                    <li class="ion-chatboxes" data-pack="default" data-tags="talk"></li>
                    <li class="ion-person" data-pack="default" data-tags="users, staff, head, human"></li>
                    <li class="ion-person-add" data-pack="default" data-tags="users, staff, head, human, member, new"></li>
                    <li class="ion-person-stalker" data-pack="default" data-tags="people, human, users, staff"></li>
                    <li class="ion-woman" data-pack="default" data-tags="female, lady, girl, dudette"></li>
                    <li class="ion-man" data-pack="default" data-tags="male, guy, boy, dude"></li>
                    <li class="ion-female" data-pack="default" data-tags="lady, girl, dudette"></li>
                    <li class="ion-male" data-pack="default" data-tags="male, guy, boy, dude"></li>
                    <li class="ion-transgender" data-pack="default" data-tags=""></li>
                    <li class="ion-fork" data-pack="default" data-tags="food, drink, eat"></li>
                    <li class="ion-knife" data-pack="default" data-tags="food, drink, eat"></li>
                    <li class="ion-spoon" data-pack="default" data-tags="food, drink, eat"></li>
                    <li class="ion-soup-can-outline" data-pack="default" data-tags="food, drink, eat"></li>
                    <li class="ion-soup-can" data-pack="default" data-tags="food, drink, eat"></li>
                    <li class="ion-beer" data-pack="default" data-tags="food, drink, eat"></li>
                    <li class="ion-wineglass" data-pack="default" data-tags="food, drink, eat"></li>
                    <li class="ion-coffee" data-pack="default" data-tags="food, drink, eat, caffeine"></li>
                    <li class="ion-icecream" data-pack="default" data-tags="food, drink, eat"></li>
                    <li class="ion-pizza" data-pack="default" data-tags="food, drink, eat"></li>
                    <li class="ion-power" data-pack="default" data-tags="on, off"></li>
                    <li class="ion-mouse" data-pack="default" data-tags="computer"></li>
                    <li class="ion-battery-full" data-pack="default" data-tags=""></li>
                    <li class="ion-battery-half" data-pack="default" data-tags=""></li>
                    <li class="ion-battery-low" data-pack="default" data-tags=""></li>
                    <li class="ion-battery-empty" data-pack="default" data-tags=""></li>
                    <li class="ion-battery-charging" data-pack="default" data-tags=""></li>
                    <li class="ion-wifi" data-pack="default" data-tags="internet, connection"></li>
                    <li class="ion-bluetooth" data-pack="default" data-tags="connection, cloud"></li>
                    <li class="ion-calculator" data-pack="default" data-tags="math, arithmatic, numbers, addition, subtraction"></li>
                    <li class="ion-camera" data-pack="default" data-tags="photo"></li>
                    <li class="ion-eye" data-pack="default" data-tags="view, see, creeper"></li>
                    <li class="ion-eye-disabled" data-pack="default" data-tags="view, see, creeper"></li>
                    <li class="ion-flash" data-pack="default" data-tags="lightning, weather, whether"></li>
                    <li class="ion-flash-off" data-pack="default" data-tags=""></li>
                    <li class="ion-qr-scanner" data-pack="default" data-tags="reader"></li>
                    <li class="ion-image" data-pack="default" data-tags="photo"></li>
                    <li class="ion-images" data-pack="default" data-tags="photo"></li>
                    <li class="ion-wand" data-pack="default" data-tags="images, levels, light, dark, settings"></li>
                    <li class="ion-contrast" data-pack="default" data-tags="images, levels, light, dark, settings"></li>
                    <li class="ion-aperture" data-pack="default" data-tags="images, levels, light, dark, settings"></li>
                    <li class="ion-crop" data-pack="default" data-tags="images, levels, light, dark, settings"></li>
                    <li class="ion-easel" data-pack="default" data-tags="images, art, create, color"></li>
                    <li class="ion-paintbrush" data-pack="default" data-tags="images, art, create, color"></li>
                    <li class="ion-paintbucket" data-pack="default" data-tags="images, art, create, color"></li>
                    <li class="ion-monitor" data-pack="default" data-tags="thunderbolt, screen"></li>
                    <li class="ion-laptop" data-pack="default" data-tags="macbook, apple, osx"></li>
                    <li class="ion-ipad" data-pack="default" data-tags="tablet, mobile, apple, retina, device"></li>
                    <li class="ion-iphone" data-pack="default" data-tags="smartphone, mobile, apple, retina, device"></li>
                    <li class="ion-ipod" data-pack="default" data-tags="music, player, apple, retina, device"></li>
                    <li class="ion-printer" data-pack="default" data-tags="paper"></li>
                    <li class="ion-usb" data-pack="default" data-tags="digital, computer"></li>
                    <li class="ion-outlet" data-pack="default" data-tags="digital, computer, electricity"></li>
                    <li class="ion-bug" data-pack="default" data-tags="develop, program, hacker, error"></li>
                    <li class="ion-code" data-pack="default" data-tags="develop, program, hacker"></li>
                    <li class="ion-code-working" data-pack="default" data-tags="develop, program, hacker"></li>
                    <li class="ion-code-download" data-pack="default" data-tags="develop, program, hacker"></li>
                    <li class="ion-fork-repo" data-pack="default" data-tags="develop, program, hacker, github"></li>
                    <li class="ion-network" data-pack="default" data-tags="develop, program, hacker, github"></li>
                    <li class="ion-pull-request" data-pack="default" data-tags="develop, program, hacker, github"></li>
                    <li class="ion-merge" data-pack="default" data-tags="develop, program, hacker, github"></li>
                    <li class="ion-xbox" data-pack="default" data-tags="fun, games"></li>
                    <li class="ion-playstation" data-pack="default" data-tags="fun, games"></li>
                    <li class="ion-steam" data-pack="default" data-tags="fun, games"></li>
                    <li class="ion-closed-captioning" data-pack="default" data-tags="movie, film, television"></li>
                    <li class="ion-videocamera" data-pack="default" data-tags="movie, film, television"></li>
                    <li class="ion-film-marker" data-pack="default" data-tags="film, cut, action"></li>
                    <li class="ion-disc" data-pack="default" data-tags="cd, vinyl"></li>
                    <li class="ion-headphone" data-pack="default" data-tags="music, earbuds, beats"></li>
                    <li class="ion-music-note" data-pack="default" data-tags="songs"></li>
                    <li class="ion-radio-waves" data-pack="default" data-tags="music, sound, speaker"></li>
                    <li class="ion-speakerphone" data-pack="default" data-tags="sound, speaker, loud, amplify"></li>
                    <li class="ion-mic-a" data-pack="default" data-tags="sound, talk, speaker"></li>
                    <li class="ion-mic-b" data-pack="default" data-tags="sound, talk, speaker"></li>
                    <li class="ion-mic-c" data-pack="default" data-tags="sound, talk, speaker"></li>
                    <li class="ion-volume-high" data-pack="default" data-tags="sound, noise"></li>
                    <li class="ion-volume-medium" data-pack="default" data-tags="sound"></li>
                    <li class="ion-volume-low" data-pack="default" data-tags="sound"></li>
                    <li class="ion-volume-mute" data-pack="default" data-tags="sound"></li>
                    <li class="ion-levels" data-pack="default" data-tags="options, toggles, sound, mixer"></li>
                    <li class="ion-play" data-pack="default" data-tags="music, watch, arrow, right"></li>
                    <li class="ion-pause" data-pack="default" data-tags="music, break, hold, freeze"></li>
                    <li class="ion-stop" data-pack="default" data-tags="music, square, hold, freeze"></li>
                    <li class="ion-record" data-pack="default" data-tags="music, circle"></li>
                    <li class="ion-skip-forward" data-pack="default" data-tags="music, next"></li>
                    <li class="ion-skip-backward" data-pack="default" data-tags="music, previous"></li>
                    <li class="ion-eject" data-pack="default" data-tags="music, dvd, remove"></li>
                    <li class="ion-bag" data-pack="default" data-tags="shopping, price, cart, money, container, $"></li>
                    <li class="ion-card" data-pack="default" data-tags="credit, price, debit, money, shopping, cash, dollars, $"></li>
                    <li class="ion-cash" data-pack="default" data-tags="credit, price, debit, money, shopping, dollars, $"></li>
                    <li class="ion-pricetag" data-pack="default" data-tags="credit, debit, money, shopping, cash, dollars, $"></li>
                    <li class="ion-pricetags" data-pack="default" data-tags="credit, debit, money, shopping, cash, dollars, $"></li>
                    <li class="ion-thumbsup" data-pack="default" data-tags="like, fun, yes"></li>
                    <li class="ion-thumbsdown" data-pack="default" data-tags="dislike, boring, no"></li>
                    <li class="ion-happy-outline" data-pack="default" data-tags="good, like, fun, yes"></li>
                    <li class="ion-happy" data-pack="default" data-tags="good, like, fun, yes"></li>
                    <li class="ion-sad-outline" data-pack="default" data-tags="cry, bad, no"></li>
                    <li class="ion-sad" data-pack="default" data-tags="cry, bad, no"></li>
                    <li class="ion-bowtie" data-pack="default" data-tags="tie, shirt, dress, clothing"></li>
                    <li class="ion-tshirt-outline" data-pack="default" data-tags="tie, shirt, dress, clothing"></li>
                    <li class="ion-tshirt" data-pack="default" data-tags="tie, shirt, dress, clothing"></li>
                    <li class="ion-trophy" data-pack="default" data-tags="competition, compete, win, lose, award"></li>
                    <li class="ion-podium" data-pack="default" data-tags="competition, compete, win, lose, award"></li>
                    <li class="ion-ribbon-a" data-pack="default" data-tags="competition, compete, win, lose, award, trophy"></li>
                    <li class="ion-ribbon-b" data-pack="default" data-tags="competition, compete, win, lose, award, trophy"></li>
                    <li class="ion-university" data-pack="default" data-tags="graduate, education, school, tassle"></li>
                    <li class="ion-magnet" data-pack="default" data-tags="sticky, attraction"></li>
                    <li class="ion-beaker" data-pack="default" data-tags="mixture, potion, flask"></li>
                    <li class="ion-erlenmeyer-flask" data-pack="default" data-tags="mixture, potion, beaker, potion"></li>
                    <li class="ion-egg" data-pack="default" data-tags="birth, twitter, bird, baby"></li>
                    <li class="ion-earth" data-pack="default" data-tags="nature, globe, home, planet"></li>
                    <li class="ion-planet" data-pack="default" data-tags="nature, globe, home, planet, space"></li>
                    <li class="ion-lightbulb" data-pack="default" data-tags="idea, new, aha!"></li>
                    <li class="ion-cube" data-pack="default" data-tags="box, square, container"></li>
                    <li class="ion-leaf" data-pack="default" data-tags="green, recycle, plant, nature"></li>
                    <li class="ion-waterdrop" data-pack="default" data-tags="nature, clean, recycle, fresh, wet, rain"></li>
                    <li class="ion-flame" data-pack="default" data-tags="fire, hot, heat"></li>
                    <li class="ion-fireball" data-pack="default" data-tags="hot, heat"></li>
                    <li class="ion-bonfire" data-pack="default" data-tags="hot, heat"></li>
                    <li class="ion-umbrella" data-pack="default" data-tags="wet, rain, dry, shelter"></li>
                    <li class="ion-nuclear" data-pack="default" data-tags="danger, warning, hazard"></li>
                    <li class="ion-no-smoking" data-pack="default" data-tags="danger, warning, cigarette, cancer"></li>
                    <li class="ion-thermometer" data-pack="default" data-tags="hot, cold, heat, temperature, mercury"></li>
                    <li class="ion-speedometer" data-pack="default" data-tags="travel, accelerate"></li>
                    <li class="ion-model-s" data-pack="default" data-tags="navigation, car, drive, transportation, tesla, sexy"></li>
                    <li class="ion-plane" data-pack="default" data-tags="fly, jet"></li>
                    <li class="ion-jet" data-pack="default" data-tags="fly, plane"></li>
                    <li class="ion-load-a" data-pack="default" data-tags="spinner, waiting, refresh"></li>
                    <li class="ion-load-b" data-pack="default" data-tags="spinner, waiting, refresh"></li>
                    <li class="ion-load-c" data-pack="default" data-tags="spinner, waiting, refresh"></li>
                    <li class="ion-load-d" data-pack="default" data-tags="spinner, waiting, refresh"></li>
                  </ul>
                  <hr class="color dotted">
                  <h2 class="color-primary mt-4 mb-2">IOS Style Icons Pack</h2>
                  <ul class="ionic-list">
                    <li class="ion-ios-ionic-outline" data-pack="ios" data-tags="badass, framework, sexy"></li>
                    <li class="ion-ios-arrow-back" data-pack="ios" data-tags="chevron, left"></li>
                    <li class="ion-ios-arrow-forward" data-pack="ios" data-tags="chevron, right"></li>
                    <li class="ion-ios-arrow-up" data-pack="ios" data-tags="chevron"></li>
                    <li class="ion-ios-arrow-right" data-pack="ios" data-tags="chevron"></li>
                    <li class="ion-ios-arrow-down" data-pack="ios" data-tags="chevron"></li>
                    <li class="ion-ios-arrow-left" data-pack="ios" data-tags="chevron"></li>
                    <li class="ion-ios-arrow-thin-up" data-pack="ios" data-tags="chevron"></li>
                    <li class="ion-ios-arrow-thin-right" data-pack="ios" data-tags="chevron"></li>
                    <li class="ion-ios-arrow-thin-down" data-pack="ios" data-tags="chevron"></li>
                    <li class="ion-ios-arrow-thin-left" data-pack="ios" data-tags="chevron"></li>
                    <li class="ion-ios-circle-filled" data-pack="ios" data-tags="checkmark, radio, dot, on, selected, button"></li>
                    <li class="ion-ios-circle-outline" data-pack="ios" data-tags="checkmark, radio, dot, off, button"></li>
                    <li class="ion-ios-checkmark-empty" data-pack="ios" data-tags="success, confirmed, on, finished, complete"></li>
                    <li class="ion-ios-checkmark-outline" data-pack="ios" data-tags="success, confirmed, on, finished, complete"></li>
                    <li class="ion-ios-checkmark" data-pack="ios" data-tags="success, confirmed, on, finished, complete"></li>
                    <li class="ion-ios-plus-empty" data-pack="ios" data-tags="add, include, new, invite, +"></li>
                    <li class="ion-ios-plus-outline" data-pack="ios" data-tags="add, include, new, invite, +"></li>
                    <li class="ion-ios-plus" data-pack="ios" data-tags="add, include, new, invite, +"></li>
                    <li class="ion-ios-close-empty" data-pack="ios" data-tags="delete, remove, trash, end, stop, x"></li>
                    <li class="ion-ios-close-outline" data-pack="ios" data-tags="delete, remove, trash, end, stop, x"></li>
                    <li class="ion-ios-close" data-pack="ios" data-tags="delete, remove, trash, end, stop, x"></li>
                    <li class="ion-ios-minus-empty" data-pack="ios" data-tags="hide, remove, minimize, -"></li>
                    <li class="ion-ios-minus-outline" data-pack="ios" data-tags="hide, remove, minimize, -"></li>
                    <li class="ion-ios-minus" data-pack="ios" data-tags="hide, remove, minimize, -"></li>
                    <li class="ion-ios-information-empty" data-pack="ios" data-tags="help, question"></li>
                    <li class="ion-ios-information-outline" data-pack="ios" data-tags="help, question"></li>
                    <li class="ion-ios-information" data-pack="ios" data-tags="help, question"></li>
                    <li class="ion-ios-help-empty" data-pack="ios" data-tags="question, information, ?"></li>
                    <li class="ion-ios-help-outline" data-pack="ios" data-tags="question, information, ?"></li>
                    <li class="ion-ios-help" data-pack="ios" data-tags="question, information, ?"></li>
                    <li class="ion-ios-search" data-pack="ios" data-tags="find, seek, look, magnifying glass"></li>
                    <li class="ion-ios-search-strong" data-pack="ios" data-tags="find, seek, look, magnifying glass"></li>
                    <li class="ion-ios-star" data-pack="ios" data-tags="favorite, rate"></li>
                    <li class="ion-ios-star-half" data-pack="ios" data-tags="favorite, rate"></li>
                    <li class="ion-ios-star-outline" data-pack="ios" data-tags="favorite, rate"></li>
                    <li class="ion-ios-heart" data-pack="ios" data-tags="love"></li>
                    <li class="ion-ios-heart-outline" data-pack="ios" data-tags="love"></li>
                    <li class="ion-ios-more" data-pack="ios" data-tags="menu"></li>
                    <li class="ion-ios-more-outline" data-pack="ios" data-tags="menu"></li>
                    <li class="ion-ios-home" data-pack="ios" data-tags="house"></li>
                    <li class="ion-ios-home-outline" data-pack="ios" data-tags="house"></li>
                    <li class="ion-ios-cloud" data-pack="ios" data-tags="storage, weather, whether"></li>
                    <li class="ion-ios-cloud-outline" data-pack="ios" data-tags="storage, weather, whether"></li>
                    <li class="ion-ios-cloud-upload" data-pack="ios" data-tags="storage"></li>
                    <li class="ion-ios-cloud-upload-outline" data-pack="ios" data-tags="storage"></li>
                    <li class="ion-ios-cloud-download" data-pack="ios" data-tags="storage"></li>
                    <li class="ion-ios-cloud-download-outline" data-pack="ios" data-tags="storage"></li>
                    <li class="ion-ios-upload" data-pack="ios" data-tags="share, import"></li>
                    <li class="ion-ios-upload-outline" data-pack="ios" data-tags="share, import"></li>
                    <li class="ion-ios-download" data-pack="ios" data-tags="save, export"></li>
                    <li class="ion-ios-download-outline" data-pack="ios" data-tags="save, export"></li>
                    <li class="ion-ios-refresh" data-pack="ios" data-tags="reload, renew, reset"></li>
                    <li class="ion-ios-refresh-outline" data-pack="ios" data-tags="reload, renew, reset"></li>
                    <li class="ion-ios-refresh-empty" data-pack="ios" data-tags="reload, renew"></li>
                    <li class="ion-ios-reload" data-pack="ios" data-tags="renew, reset"></li>
                    <li class="ion-ios-loop-strong" data-pack="ios" data-tags="reload, renew, reset"></li>
                    <li class="ion-ios-loop" data-pack="ios" data-tags="reload, renew, reset"></li>
                    <li class="ion-ios-bookmarks" data-pack="ios" data-tags="favorite"></li>
                    <li class="ion-ios-bookmarks-outline" data-pack="ios" data-tags="favorite"></li>
                    <li class="ion-ios-book" data-pack="ios" data-tags="favorite, read, literature"></li>
                    <li class="ion-ios-book-outline" data-pack="ios" data-tags="favorite, read, literature"></li>
                    <li class="ion-ios-flag" data-pack="ios" data-tags="marker, favorite"></li>
                    <li class="ion-ios-flag-outline" data-pack="ios" data-tags="marker, favorite"></li>
                    <li class="ion-ios-glasses" data-pack="ios" data-tags="steve, reading, look, see"></li>
                    <li class="ion-ios-glasses-outline" data-pack="ios" data-tags="steve, reading, look, see"></li>
                    <li class="ion-ios-browsers" data-pack="ios" data-tags="square"></li>
                    <li class="ion-ios-browsers-outline" data-pack="ios" data-tags="square"></li>
                    <li class="ion-ios-at" data-pack="ios" data-tags="@"></li>
                    <li class="ion-ios-at-outline" data-pack="ios" data-tags="@"></li>
                    <li class="ion-ios-pricetag" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
                    <li class="ion-ios-pricetag-outline" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
                    <li class="ion-ios-pricetags" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
                    <li class="ion-ios-pricetags-outline" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
                    <li class="ion-ios-cart" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
                    <li class="ion-ios-cart-outline" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
                    <li class="ion-ios-chatboxes" data-pack="ios" data-tags="talk"></li>
                    <li class="ion-ios-chatboxes-outline" data-pack="ios" data-tags="talk"></li>
                    <li class="ion-ios-chatbubble" data-pack="ios" data-tags="talk"></li>
                    <li class="ion-ios-chatbubble-outline" data-pack="ios" data-tags="talk"></li>
                    <li class="ion-ios-cog" data-pack="ios" data-tags="settings, gear, options"></li>
                    <li class="ion-ios-cog-outline" data-pack="ios" data-tags="settings, gear, options"></li>
                    <li class="ion-ios-gear" data-pack="ios" data-tags="cog, settings, options"></li>
                    <li class="ion-ios-gear-outline" data-pack="ios" data-tags="cog, settings, options"></li>
                    <li class="ion-ios-settings" data-pack="ios" data-tags="cog, settings, options"></li>
                    <li class="ion-ios-settings-strong" data-pack="ios" data-tags="cog, settings, options"></li>
                    <li class="ion-ios-toggle" data-pack="ios" data-tags="settings, options, switch"></li>
                    <li class="ion-ios-toggle-outline" data-pack="ios" data-tags="settings, options, switch"></li>
                    <li class="ion-ios-analytics" data-pack="ios" data-tags="metrics, track, data"></li>
                    <li class="ion-ios-analytics-outline" data-pack="ios" data-tags="metrics, track, data"></li>
                    <li class="ion-ios-pie" data-pack="ios" data-tags="cog, settings, options"></li>
                    <li class="ion-ios-pie-outline" data-pack="ios" data-tags="cog, settings, options"></li>
                    <li class="ion-ios-pulse" data-pack="ios" data-tags="live, hot, rate"></li>
                    <li class="ion-ios-pulse-strong" data-pack="ios" data-tags="live, hot, rate"></li>
                    <li class="ion-ios-filing" data-pack="ios" data-tags="archive"></li>
                    <li class="ion-ios-filing-outline" data-pack="ios" data-tags="archive"></li>
                    <li class="ion-ios-box" data-pack="ios" data-tags="archive"></li>
                    <li class="ion-ios-box-outline" data-pack="ios" data-tags="archive"></li>
                    <li class="ion-ios-compose" data-pack="ios" data-tags="write, type, create"></li>
                    <li class="ion-ios-compose-outline" data-pack="ios" data-tags="write, type, create"></li>
                    <li class="ion-ios-trash" data-pack="ios" data-tags="delete, remove, dispose, waste, basket, dump, kill"></li>
                    <li class="ion-ios-trash-outline" data-pack="ios" data-tags="delete, remove, dispose, waste, basket, dump, kill"></li>
                    <li class="ion-ios-copy" data-pack="ios" data-tags="duplicate, paper"></li>
                    <li class="ion-ios-copy-outline" data-pack="ios" data-tags="duplicate, paper"></li>
                    <li class="ion-ios-email" data-pack="ios" data-tags="snail, mail"></li>
                    <li class="ion-ios-email-outline" data-pack="ios" data-tags="snail, mail"></li>
                    <li class="ion-ios-undo" data-pack="ios" data-tags="reply"></li>
                    <li class="ion-ios-undo-outline" data-pack="ios" data-tags="reply"></li>
                    <li class="ion-ios-redo" data-pack="ios" data-tags="forward"></li>
                    <li class="ion-ios-redo-outline" data-pack="ios" data-tags="forward"></li>
                    <li class="ion-ios-paperplane" data-pack="ios" data-tags="send"></li>
                    <li class="ion-ios-paperplane-outline" data-pack="ios" data-tags="send"></li>
                    <li class="ion-ios-folder" data-pack="ios" data-tags="file"></li>
                    <li class="ion-ios-folder-outline" data-pack="ios" data-tags="file"></li>
                    <li class="ion-ios-paper" data-pack="ios" data-tags="feed, paper"></li>
                    <li class="ion-ios-paper-outline" data-pack="ios" data-tags="feed, paper"></li>
                    <li class="ion-ios-list" data-pack="ios" data-tags="todo, feed, paper"></li>
                    <li class="ion-ios-list-outline" data-pack="ios" data-tags="todo, feed, paper"></li>
                    <li class="ion-ios-world" data-pack="ios" data-tags="globe, earth"></li>
                    <li class="ion-ios-world-outline" data-pack="ios" data-tags="globe, earth"></li>
                    <li class="ion-ios-alarm" data-pack="ios" data-tags="wake, ring"></li>
                    <li class="ion-ios-alarm-outline" data-pack="ios" data-tags="wake, ring"></li>
                    <li class="ion-ios-speedometer" data-pack="ios" data-tags="speed, drive, level"></li>
                    <li class="ion-ios-speedometer-outline" data-pack="ios" data-tags="speed, drive, level"></li>
                    <li class="ion-ios-stopwatch" data-pack="ios" data-tags="time, speed"></li>
                    <li class="ion-ios-stopwatch-outline" data-pack="ios" data-tags="time, speed"></li>
                    <li class="ion-ios-timer" data-pack="ios" data-tags="cooking, alarm, buzz"></li>
                    <li class="ion-ios-timer-outline" data-pack="ios" data-tags="cooking, alarm, buzz"></li>
                    <li class="ion-ios-clock" data-pack="ios" data-tags="time, date, hours, minutes, seconds, watch"></li>
                    <li class="ion-ios-clock-outline" data-pack="ios" data-tags="time, date, hours, minutes, seconds, watch"></li>
                    <li class="ion-ios-time" data-pack="ios" data-tags="clock, watch, hour, minute, second"></li>
                    <li class="ion-ios-time-outline" data-pack="ios" data-tags="clock, watch, hour, minute, second"></li>
                    <li class="ion-ios-calendar" data-pack="ios" data-tags="date, time, month, year"></li>
                    <li class="ion-ios-calendar-outline" data-pack="ios" data-tags="date, time, month, year"></li>
                    <li class="ion-ios-photos" data-pack="ios" data-tags="images, stills, square"></li>
                    <li class="ion-ios-photos-outline" data-pack="ios" data-tags="images, stills, square"></li>
                    <li class="ion-ios-albums" data-pack="ios" data-tags="square, boxes, slides"></li>
                    <li class="ion-ios-albums-outline" data-pack="ios" data-tags="square, boxes, slides"></li>
                    <li class="ion-ios-camera" data-pack="ios" data-tags="picture"></li>
                    <li class="ion-ios-camera-outline" data-pack="ios" data-tags="picture"></li>
                    <li class="ion-ios-reverse-camera" data-pack="ios" data-tags="picture"></li>
                    <li class="ion-ios-reverse-camera-outline" data-pack="ios" data-tags="picture"></li>
                    <li class="ion-ios-eye" data-pack="ios" data-tags="view, see, exposed, look"></li>
                    <li class="ion-ios-eye-outline" data-pack="ios" data-tags="view, see, exposed, look"></li>
                    <li class="ion-ios-bolt" data-pack="ios" data-tags="flash, lightning"></li>
                    <li class="ion-ios-bolt-outline" data-pack="ios" data-tags="flash, lightning"></li>
                    <li class="ion-ios-color-wand" data-pack="ios" data-tags="camera, picture, edit, magic"></li>
                    <li class="ion-ios-color-wand-outline" data-pack="ios" data-tags="camera, picture, edit, magic"></li>
                    <li class="ion-ios-color-filter" data-pack="ios" data-tags="camera, picture"></li>
                    <li class="ion-ios-color-filter-outline" data-pack="ios" data-tags="camera, picture"></li>
                    <li class="ion-ios-grid-view" data-pack="ios" data-tags="camera, picture"></li>
                    <li class="ion-ios-grid-view-outline" data-pack="ios" data-tags="camera, picture"></li>
                    <li class="ion-ios-crop-strong" data-pack="ios" data-tags="camera, picture, edit"></li>
                    <li class="ion-ios-crop" data-pack="ios" data-tags="camera, picture, edit"></li>
                    <li class="ion-ios-barcode" data-pack="ios" data-tags="reader, camera"></li>
                    <li class="ion-ios-barcode-outline" data-pack="ios" data-tags="reader, camera"></li>
                    <li class="ion-ios-briefcase" data-pack="ios" data-tags="organize, folder"></li>
                    <li class="ion-ios-briefcase-outline" data-pack="ios" data-tags="organize, folder"></li>
                    <li class="ion-ios-medkit" data-pack="ios" data-tags="health, case, first aid, sick, disease"></li>
                    <li class="ion-ios-medkit-outline" data-pack="ios" data-tags="health, case, first aid, sick, disease"></li>
                    <li class="ion-ios-medical" data-pack="ios" data-tags="health, case, first aid, sick, disease"></li>
                    <li class="ion-ios-medical-outline" data-pack="ios" data-tags="health, case, first aid, sick, disease"></li>
                    <li class="ion-ios-infinite" data-pack="ios" data-tags="forever, loop"></li>
                    <li class="ion-ios-infinite-outline" data-pack="ios" data-tags="forever, loop"></li>
                    <li class="ion-ios-calculator" data-pack="ios" data-tags="math, arithmatic"></li>
                    <li class="ion-ios-calculator-outline" data-pack="ios" data-tags="math, arithmatic"></li>
                    <li class="ion-ios-keypad" data-pack="ios" data-tags="type, grid, circle"></li>
                    <li class="ion-ios-keypad-outline" data-pack="ios" data-tags="type, grid, circle"></li>
                    <li class="ion-ios-telephone" data-pack="ios" data-tags="oldschool, call"></li>
                    <li class="ion-ios-telephone-outline" data-pack="ios" data-tags="oldschool, call"></li>
                    <li class="ion-ios-drag" data-pack="ios" data-tags="reorder, move, drag"></li>
                    <li class="ion-ios-location" data-pack="ios" data-tags="navigation, map, gps, pin"></li>
                    <li class="ion-ios-location-outline" data-pack="ios" data-tags="navigation, map, gps, pin"></li>
                    <li class="ion-ios-navigate" data-pack="ios" data-tags="location, map, gps, pin"></li>
                    <li class="ion-ios-navigate-outline" data-pack="ios" data-tags="location, map, gps, pin"></li>
                    <li class="ion-ios-locked" data-pack="ios" data-tags="security, padlock, safe"></li>
                    <li class="ion-ios-locked-outline" data-pack="ios" data-tags="security, padlock, safe"></li>
                    <li class="ion-ios-unlocked" data-pack="ios" data-tags="security, padlock, safe"></li>
                    <li class="ion-ios-unlocked-outline" data-pack="ios" data-tags="security, padlock, safe"></li>
                    <li class="ion-ios-monitor" data-pack="ios" data-tags="thunderbolt, display, screen"></li>
                    <li class="ion-ios-monitor-outline" data-pack="ios" data-tags="thunderbolt, display, screen"></li>
                    <li class="ion-ios-printer" data-pack="ios" data-tags="paper"></li>
                    <li class="ion-ios-printer-outline" data-pack="ios" data-tags="paper"></li>
                    <li class="ion-ios-game-controller-a" data-pack="ios" data-tags="gaming, nintendo, play"></li>
                    <li class="ion-ios-game-controller-a-outline" data-pack="ios" data-tags="gaming, nintendo, play"></li>
                    <li class="ion-ios-game-controller-b" data-pack="ios" data-tags="gaming, nintendo, play"></li>
                    <li class="ion-ios-game-controller-b-outline" data-pack="ios" data-tags="gaming, nintendo, play"></li>
                    <li class="ion-ios-americanfootball" data-pack="ios" data-tags="nfl, games, sports, fun, play"></li>
                    <li class="ion-ios-americanfootball-outline" data-pack="ios" data-tags="nfl, games, sports, fun, play"></li>
                    <li class="ion-ios-baseball" data-pack="ios" data-tags="mlb, games, sports, fun, play"></li>
                    <li class="ion-ios-baseball-outline" data-pack="ios" data-tags="mlb, games, sports, fun, play"></li>
                    <li class="ion-ios-basketball" data-pack="ios" data-tags="nba, games, sports, fun, play"></li>
                    <li class="ion-ios-basketball-outline" data-pack="ios" data-tags="nba, games, sports, fun, play"></li>
                    <li class="ion-ios-tennisball" data-pack="ios" data-tags="games, sports, fun, play"></li>
                    <li class="ion-ios-tennisball-outline" data-pack="ios" data-tags="games, sports, fun, play"></li>
                    <li class="ion-ios-football" data-pack="ios" data-tags="mls, soccer, games, sports, fun, play"></li>
                    <li class="ion-ios-football-outline" data-pack="ios" data-tags="mls, soccer, games, sports, fun, play"></li>
                    <li class="ion-ios-body" data-pack="ios" data-tags="person, users, staff, head, human"></li>
                    <li class="ion-ios-body-outline" data-pack="ios" data-tags="person, users, staff, head, human"></li>
                    <li class="ion-ios-person" data-pack="ios" data-tags="users, staff, head, human"></li>
                    <li class="ion-ios-person-outline" data-pack="ios" data-tags="users, staff, head, human"></li>
                    <li class="ion-ios-personadd" data-pack="ios" data-tags="users, staff, head, human, new, invite"></li>
                    <li class="ion-ios-personadd-outline" data-pack="ios" data-tags="users, staff, head, human, new, invite"></li>
                    <li class="ion-ios-people" data-pack="ios" data-tags="stalker, person, users, head, human"></li>
                    <li class="ion-ios-people-outline" data-pack="ios" data-tags="stalker, person, users, head, human"></li>
                    <li class="ion-ios-musical-notes" data-pack="ios" data-tags="sound, noise, listening, play"></li>
                    <li class="ion-ios-musical-note" data-pack="ios" data-tags="sound, noise, listening, play"></li>
                    <li class="ion-ios-bell" data-pack="ios" data-tags="right, noise, alarm, sound, music"></li>
                    <li class="ion-ios-bell-outline" data-pack="ios" data-tags="right, noise, alarm, sound, music"></li>
                    <li class="ion-ios-mic" data-pack="ios" data-tags="sound, noise, speaker, talk"></li>
                    <li class="ion-ios-mic-outline" data-pack="ios" data-tags="sound, noise, speaker, talk"></li>
                    <li class="ion-ios-mic-off" data-pack="ios" data-tags="sound, noise, speaker, talk"></li>
                    <li class="ion-ios-volume-high" data-pack="ios" data-tags="sound, noise, listen, music"></li>
                    <li class="ion-ios-volume-low" data-pack="ios" data-tags="sound, noise, listen, music"></li>
                    <li class="ion-ios-play" data-pack="ios" data-tags="music, watch, arrow, right"></li>
                    <li class="ion-ios-play-outline" data-pack="ios" data-tags="music, watch, arrow, right"></li>
                    <li class="ion-ios-pause" data-pack="ios" data-tags="music, break, hold, freeze"></li>
                    <li class="ion-ios-pause-outline" data-pack="ios" data-tags="music, break, hold, freeze"></li>
                    <li class="ion-ios-recording" data-pack="ios" data-tags="film, tape, voicemail"></li>
                    <li class="ion-ios-recording-outline" data-pack="ios" data-tags="film, tape, voicemail"></li>
                    <li class="ion-ios-fastforward" data-pack="ios" data-tags="next, skip, jump"></li>
                    <li class="ion-ios-fastforward-outline" data-pack="ios" data-tags="next, skip, jump"></li>
                    <li class="ion-ios-rewind" data-pack="ios" data-tags="music, previous, back"></li>
                    <li class="ion-ios-rewind-outline" data-pack="ios" data-tags="music, previous, back"></li>
                    <li class="ion-ios-skipbackward" data-pack="ios" data-tags="music, previous"></li>
                    <li class="ion-ios-skipbackward-outline" data-pack="ios" data-tags="music, previous"></li>
                    <li class="ion-ios-skipforward" data-pack="ios" data-tags="music, next"></li>
                    <li class="ion-ios-skipforward-outline" data-pack="ios" data-tags="music, next"></li>
                    <li class="ion-ios-shuffle-strong" data-pack="ios" data-tags="music, next"></li>
                    <li class="ion-ios-shuffle" data-pack="ios" data-tags="music, next"></li>
                    <li class="ion-ios-videocam" data-pack="ios" data-tags="film, movie, camera"></li>
                    <li class="ion-ios-videocam-outline" data-pack="ios" data-tags="film, movie, camera"></li>
                    <li class="ion-ios-film" data-pack="ios" data-tags="film, movie, camera"></li>
                    <li class="ion-ios-film-outline" data-pack="ios" data-tags="film, movie, camera"></li>
                    <li class="ion-ios-flask" data-pack="ios" data-tags="options, mixer, liquid"></li>
                    <li class="ion-ios-flask-outline" data-pack="ios" data-tags="options, mixer, liquid"></li>
                    <li class="ion-ios-lightbulb" data-pack="ios" data-tags="idea, new, bright, aha!"></li>
                    <li class="ion-ios-lightbulb-outline" data-pack="ios" data-tags="idea, new, bright, aha!"></li>
                    <li class="ion-ios-wineglass" data-pack="ios" data-tags="alcohol, drink, food, glass, drunk, cheers"></li>
                    <li class="ion-ios-wineglass-outline" data-pack="ios" data-tags="alcohol, drink, food, glass, drunk, cheers"></li>
                    <li class="ion-ios-pint" data-pack="ios" data-tags="alcohol, drink, food, beer, drunk, cheers"></li>
                    <li class="ion-ios-pint-outline" data-pack="ios" data-tags="alcohol, drink, food, beer, drunk, cheers"></li>
                    <li class="ion-ios-nutrition" data-pack="ios" data-tags="health, carrot, food"></li>
                    <li class="ion-ios-nutrition-outline" data-pack="ios" data-tags="health, carrot, food"></li>
                    <li class="ion-ios-flower" data-pack="ios" data-tags="nature, spring, leaf, garden"></li>
                    <li class="ion-ios-flower-outline" data-pack="ios" data-tags="nature, spring, leaf, garden"></li>
                    <li class="ion-ios-rose" data-pack="ios" data-tags="nature, spring, leaf, garden, flower"></li>
                    <li class="ion-ios-rose-outline" data-pack="ios" data-tags="nature, spring, leaf, garden, flower"></li>
                    <li class="ion-ios-paw" data-pack="ios" data-tags="nature, animal, pet, outdoor, track"></li>
                    <li class="ion-ios-paw-outline" data-pack="ios" data-tags="nature, animal, pet, outdoor, track"></li>
                    <li class="ion-ios-flame" data-pack="ios" data-tags="fire, hot, burn"></li>
                    <li class="ion-ios-flame-outline" data-pack="ios" data-tags="fire, hot, burn"></li>
                    <li class="ion-ios-sunny" data-pack="ios" data-tags="weather, whether, light, sky"></li>
                    <li class="ion-ios-sunny-outline" data-pack="ios" data-tags="weather, whether, light, sky"></li>
                    <li class="ion-ios-partlysunny" data-pack="ios" data-tags="light, weather, whether, cloudy"></li>
                    <li class="ion-ios-partlysunny-outline" data-pack="ios" data-tags="light, weather, whether, cloudy"></li>
                    <li class="ion-ios-cloudy" data-pack="ios" data-tags="weather, whether, overcast"></li>
                    <li class="ion-ios-cloudy-outline" data-pack="ios" data-tags="weather, whether, overcast"></li>
                    <li class="ion-ios-rainy" data-pack="ios" data-tags="whether, weather, water, cloud"></li>
                    <li class="ion-ios-rainy-outline" data-pack="ios" data-tags="whether, weather, water, cloud"></li>
                    <li class="ion-ios-thunderstorm" data-pack="ios" data-tags="whether, weather, sky, lightning, rain, cloudy, overcast, storm"></li>
                    <li class="ion-ios-thunderstorm-outline" data-pack="ios" data-tags="whether, weather, sky, lightning, rain, cloudy, overcast, storm"></li>
                    <li class="ion-ios-snowy" data-pack="ios" data-tags="cold, weather, whether, overcast"></li>
                    <li class="ion-ios-moon" data-pack="ios" data-tags="sky, night, dark"></li>
                    <li class="ion-ios-moon-outline" data-pack="ios" data-tags="sky, night, dark"></li>
                    <li class="ion-ios-cloudy-night" data-pack="ios" data-tags="weather, whether, overcast"></li>
                    <li class="ion-ios-cloudy-night-outline" data-pack="ios" data-tags="weather, whether, overcast"></li>
                  </ul>
                  <hr class="color dotted">
                  <h2 class="color-primary mt-4 mb-2">Android Style Icons Pack</h2>
                  <ul class="ionic-list">
                    <li class="ion-android-arrow-up" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-forward" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-down" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-back" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-dropup" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-dropup-circle" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-dropright" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-dropright-circle" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-dropdown" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-dropdown-circle" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-dropleft" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-arrow-dropleft-circle" data-pack="android" data-tags="chevron, navigation"></li>
                    <li class="ion-android-add" data-pack="android" data-tags="plus, include, invite"></li>
                    <li class="ion-android-add-circle" data-pack="android" data-tags="plus, include, invite"></li>
                    <li class="ion-android-remove" data-pack="android" data-tags="minus, subtract, delete"></li>
                    <li class="ion-android-remove-circle" data-pack="android" data-tags="minus, subtract, delete"></li>
                    <li class="ion-android-close" data-pack="android" data-tags="delete, remove"></li>
                    <li class="ion-android-cancel" data-pack="android" data-tags="delete, remove"></li>
                    <li class="ion-android-radio-button-off" data-pack="android" data-tags=""></li>
                    <li class="ion-android-radio-button-on" data-pack="android" data-tags=""></li>
                    <li class="ion-android-checkmark-circle" data-pack="android" data-tags=""></li>
                    <li class="ion-android-checkbox-outline-blank" data-pack="android" data-tags=""></li>
                    <li class="ion-android-checkbox-outline" data-pack="android" data-tags=""></li>
                    <li class="ion-android-checkbox-blank" data-pack="android" data-tags=""></li>
                    <li class="ion-android-checkbox" data-pack="android" data-tags=""></li>
                    <li class="ion-android-done" data-pack="android" data-tags=""></li>
                    <li class="ion-android-done-all" data-pack="android" data-tags=""></li>
                    <li class="ion-android-menu" data-pack="android" data-tags=""></li>
                    <li class="ion-android-more-horizontal" data-pack="android" data-tags="options, menu"></li>
                    <li class="ion-android-more-vertical" data-pack="android" data-tags="options, menu"></li>
                    <li class="ion-android-refresh" data-pack="android" data-tags=""></li>
                    <li class="ion-android-sync" data-pack="android" data-tags=""></li>
                    <li class="ion-android-wifi" data-pack="android" data-tags="internet,connection, bars"></li>
                    <li class="ion-android-call" data-pack="android" data-tags="telephone"></li>
                    <li class="ion-android-apps" data-pack="android" data-tags=""></li>
                    <li class="ion-android-settings" data-pack="android" data-tags="options"></li>
                    <li class="ion-android-options" data-pack="android" data-tags="settings, mixer"></li>
                    <li class="ion-android-funnel" data-pack="android" data-tags=""></li>
                    <li class="ion-android-search" data-pack="android" data-tags="magnifying glass"></li>
                    <li class="ion-android-home" data-pack="android" data-tags=""></li>
                    <li class="ion-android-cloud-outline" data-pack="android" data-tags=""></li>
                    <li class="ion-android-cloud" data-pack="android" data-tags=""></li>
                    <li class="ion-android-download" data-pack="android" data-tags=""></li>
                    <li class="ion-android-upload" data-pack="android" data-tags=""></li>
                    <li class="ion-android-cloud-done" data-pack="android" data-tags=""></li>
                    <li class="ion-android-cloud-circle" data-pack="android" data-tags=""></li>
                    <li class="ion-android-favorite-outline" data-pack="android" data-tags="favorite, like, rate"></li>
                    <li class="ion-android-favorite" data-pack="android" data-tags="favorite, like, rate"></li>
                    <li class="ion-android-star-outline" data-pack="android" data-tags="favorite, like, rate"></li>
                    <li class="ion-android-star-half" data-pack="android" data-tags="favorite, like, rate"></li>
                    <li class="ion-android-star" data-pack="android" data-tags="favorite, like, rate"></li>
                    <li class="ion-android-calendar" data-pack="android" data-tags="clock"></li>
                    <li class="ion-android-alarm-clock" data-pack="android" data-tags="clock"></li>
                    <li class="ion-android-time" data-pack="android" data-tags="clock"></li>
                    <li class="ion-android-stopwatch" data-pack="android" data-tags=""></li>
                    <li class="ion-android-watch" data-pack="android" data-tags=""></li>
                    <li class="ion-android-locate" data-pack="android" data-tags=""></li>
                    <li class="ion-android-navigate" data-pack="android" data-tags=""></li>
                    <li class="ion-android-pin" data-pack="android" data-tags=""></li>
                    <li class="ion-android-compass" data-pack="android" data-tags=""></li>
                    <li class="ion-android-map" data-pack="android" data-tags=""></li>
                    <li class="ion-android-walk" data-pack="android" data-tags=""></li>
                    <li class="ion-android-bicycle" data-pack="android" data-tags="move, bike, transportation, maps"></li>
                    <li class="ion-android-car" data-pack="android" data-tags=""></li>
                    <li class="ion-android-bus" data-pack="android" data-tags=""></li>
                    <li class="ion-android-subway" data-pack="android" data-tags=""></li>
                    <li class="ion-android-train" data-pack="android" data-tags=""></li>
                    <li class="ion-android-boat" data-pack="android" data-tags=""></li>
                    <li class="ion-android-plane" data-pack="android" data-tags=""></li>
                    <li class="ion-android-restaurant" data-pack="android" data-tags=""></li>
                    <li class="ion-android-bar" data-pack="android" data-tags="wine, drink, food, dinner"></li>
                    <li class="ion-android-cart" data-pack="android" data-tags=""></li>
                    <li class="ion-android-camera" data-pack="android" data-tags=""></li>
                    <li class="ion-android-image" data-pack="android" data-tags=""></li>
                    <li class="ion-android-film" data-pack="android" data-tags=""></li>
                    <li class="ion-android-color-palette" data-pack="android" data-tags=""></li>
                    <li class="ion-android-create" data-pack="android" data-tags=""></li>
                    <li class="ion-android-mail" data-pack="android" data-tags=""></li>
                    <li class="ion-android-drafts" data-pack="android" data-tags=""></li>
                    <li class="ion-android-send" data-pack="android" data-tags=""></li>
                    <li class="ion-android-archive" data-pack="android" data-tags=""></li>
                    <li class="ion-android-delete" data-pack="android" data-tags=""></li>
                    <li class="ion-android-attach" data-pack="android" data-tags=""></li>
                    <li class="ion-android-share" data-pack="android" data-tags=""></li>
                    <li class="ion-android-share-alt" data-pack="android" data-tags=""></li>
                    <li class="ion-android-bookmark" data-pack="android" data-tags=""></li>
                    <li class="ion-android-document" data-pack="android" data-tags=""></li>
                    <li class="ion-android-clipboard" data-pack="android" data-tags=""></li>
                    <li class="ion-android-list" data-pack="android" data-tags=""></li>
                    <li class="ion-android-folder-open" data-pack="android" data-tags=""></li>
                    <li class="ion-android-folder" data-pack="android" data-tags=""></li>
                    <li class="ion-android-print" data-pack="android" data-tags=""></li>
                    <li class="ion-android-open" data-pack="android" data-tags=""></li>
                    <li class="ion-android-exit" data-pack="android" data-tags=""></li>
                    <li class="ion-android-contract" data-pack="android" data-tags=""></li>
                    <li class="ion-android-expand" data-pack="android" data-tags=""></li>
                    <li class="ion-android-globe" data-pack="android" data-tags=""></li>
                    <li class="ion-android-chat" data-pack="android" data-tags="talk, text"></li>
                    <li class="ion-android-textsms" data-pack="android" data-tags="talk, text"></li>
                    <li class="ion-android-hangout" data-pack="android" data-tags=""></li>
                    <li class="ion-android-happy" data-pack="android" data-tags=""></li>
                    <li class="ion-android-sad" data-pack="android" data-tags=""></li>
                    <li class="ion-android-person" data-pack="android" data-tags=""></li>
                    <li class="ion-android-people" data-pack="android" data-tags=""></li>
                    <li class="ion-android-person-add" data-pack="android" data-tags=""></li>
                    <li class="ion-android-contact" data-pack="android" data-tags=""></li>
                    <li class="ion-android-contacts" data-pack="android" data-tags=""></li>
                    <li class="ion-android-playstore" data-pack="android" data-tags=""></li>
                    <li class="ion-android-lock" data-pack="android" data-tags=""></li>
                    <li class="ion-android-unlock" data-pack="android" data-tags=""></li>
                    <li class="ion-android-microphone" data-pack="android" data-tags="recorder, speak, noise, music, sound"></li>
                    <li class="ion-android-microphone-off" data-pack="android" data-tags="recorder, speak, noise, music, sound, mute"></li>
                    <li class="ion-android-notifications-none" data-pack="android" data-tags=""></li>
                    <li class="ion-android-notifications" data-pack="android" data-tags=""></li>
                    <li class="ion-android-notifications-off" data-pack="android" data-tags=""></li>
                    <li class="ion-android-volume-mute" data-pack="android" data-tags=""></li>
                    <li class="ion-android-volume-down" data-pack="android" data-tags=""></li>
                    <li class="ion-android-volume-up" data-pack="android" data-tags=""></li>
                    <li class="ion-android-volume-off" data-pack="android" data-tags=""></li>
                    <li class="ion-android-hand" data-pack="android" data-tags="stop"></li>
                    <li class="ion-android-desktop" data-pack="android" data-tags=""></li>
                    <li class="ion-android-laptop" data-pack="android" data-tags=""></li>
                    <li class="ion-android-phone-portrait" data-pack="android" data-tags=""></li>
                    <li class="ion-android-phone-landscape" data-pack="android" data-tags=""></li>
                    <li class="ion-android-bulb" data-pack="android" data-tags=""></li>
                    <li class="ion-android-sunny" data-pack="android" data-tags=""></li>
                    <li class="ion-android-alert" data-pack="android" data-tags=""></li>
                    <li class="ion-android-warning" data-pack="android" data-tags=""></li>
                  </ul>
                  <hr class="color dotted">
                  <h2 class="color-primary mt-4 mb-2">Social Icons Pack</h2>
                  <ul class="ionic-list">
                    <li class="ion-social-twitter" data-pack="social" data-tags="follow, post, share"></li>
                    <li class="ion-social-twitter-outline" data-pack="social" data-tags="follow, post, share"></li>
                    <li class="ion-social-facebook" data-pack="social" data-tags="like, post, share"></li>
                    <li class="ion-social-facebook-outline" data-pack="social" data-tags="like, post, share"></li>
                    <li class="ion-social-googleplus" data-pack="social" data-tags="follow, post, share"></li>
                    <li class="ion-social-googleplus-outline" data-pack="social" data-tags="follow, post, share"></li>
                    <li class="ion-social-google" data-pack="social" data-tags="follow, post, share"></li>
                    <li class="ion-social-google-outline" data-pack="social" data-tags="follow, post, share"></li>
                    <li class="ion-social-dribbble" data-pack="social" data-tags="design"></li>
                    <li class="ion-social-dribbble-outline" data-pack="social" data-tags="design"></li>
                    <li class="ion-social-octocat" data-pack="social" data-tags="code, github, fork, merge, clone"></li>
                    <li class="ion-social-github" data-pack="social" data-tags="code, fork, merge, clone"></li>
                    <li class="ion-social-github-outline" data-pack="social" data-tags="code, fork, merge, clone"></li>
                    <li class="ion-social-instagram" data-pack="social" data-tags="photo, camera, facebook"></li>
                    <li class="ion-social-instagram-outline" data-pack="social" data-tags="photo, camera, facebook"></li>
                    <li class="ion-social-whatsapp" data-pack="social" data-tags="text, sharing, private, facebook"></li>
                    <li class="ion-social-whatsapp-outline" data-pack="social" data-tags="text, sharing, private, facebook"></li>
                    <li class="ion-social-snapchat" data-pack="social" data-tags="photos, app"></li>
                    <li class="ion-social-snapchat-outline" data-pack="social" data-tags="photos, app"></li>
                    <li class="ion-social-foursquare" data-pack="social" data-tags="checkin"></li>
                    <li class="ion-social-foursquare-outline" data-pack="social" data-tags="checkin"></li>
                    <li class="ion-social-pinterest" data-pack="social" data-tags="social"></li>
                    <li class="ion-social-pinterest-outline" data-pack="social" data-tags="social"></li>
                    <li class="ion-social-rss" data-pack="social" data-tags="blogging"></li>
                    <li class="ion-social-rss-outline" data-pack="social" data-tags="blogging"></li>
                    <li class="ion-social-tumblr" data-pack="social" data-tags="blogging"></li>
                    <li class="ion-social-tumblr-outline" data-pack="social" data-tags="blogging"></li>
                    <li class="ion-social-wordpress" data-pack="social" data-tags="blogging"></li>
                    <li class="ion-social-wordpress-outline" data-pack="social" data-tags="blogging"></li>
                    <li class="ion-social-reddit" data-pack="social" data-tags="news, upvotes, karma"></li>
                    <li class="ion-social-reddit-outline" data-pack="social" data-tags="news, upvotes, karma"></li>
                    <li class="ion-social-hackernews" data-pack="social" data-tags="discuss, upvotes, karma"></li>
                    <li class="ion-social-hackernews-outline" data-pack="social" data-tags="discuss, upvotes, karma"></li>
                    <li class="ion-social-designernews" data-pack="social" data-tags="design, post"></li>
                    <li class="ion-social-designernews-outline" data-pack="social" data-tags="design, post"></li>
                    <li class="ion-social-yahoo" data-pack="social" data-tags=""></li>
                    <li class="ion-social-yahoo-outline" data-pack="social" data-tags=""></li>
                    <li class="ion-social-buffer" data-pack="social" data-tags="share"></li>
                    <li class="ion-social-buffer-outline" data-pack="social" data-tags="share"></li>
                    <li class="ion-social-skype" data-pack="social" data-tags="call"></li>
                    <li class="ion-social-skype-outline" data-pack="social" data-tags="call"></li>
                    <li class="ion-social-linkedin" data-pack="social" data-tags="connect"></li>
                    <li class="ion-social-linkedin-outline" data-pack="social" data-tags="connect"></li>
                    <li class="ion-social-vimeo" data-pack="social" data-tags="video, watch, share, view"></li>
                    <li class="ion-social-vimeo-outline" data-pack="social" data-tags="video, watch, share, view"></li>
                    <li class="ion-social-twitch" data-pack="social" data-tags="gaming, games, live, streaming, video, watch, share, view"></li>
                    <li class="ion-social-twitch-outline" data-pack="social" data-tags="gaming, games, live, streaming, video, watch, share, view"></li>
                    <li class="ion-social-youtube" data-pack="social" data-tags="video, watch, share, view"></li>
                    <li class="ion-social-youtube-outline" data-pack="social" data-tags="video, watch, share, view"></li>
                    <li class="ion-social-dropbox" data-pack="social" data-tags="upload"></li>
                    <li class="ion-social-dropbox-outline" data-pack="social" data-tags="upload"></li>
                    <li class="ion-social-apple" data-pack="social" data-tags="mac, mobile"></li>
                    <li class="ion-social-apple-outline" data-pack="social" data-tags="mac, mobile"></li>
                    <li class="ion-social-android" data-pack="social" data-tags="mobile"></li>
                    <li class="ion-social-android-outline" data-pack="social" data-tags="mobile"></li>
                    <li class="ion-social-windows" data-pack="social" data-tags="pc"></li>
                    <li class="ion-social-windows-outline" data-pack="social" data-tags="pc"></li>
                    <li class="ion-social-html5" data-pack="social" data-tags="code, html, css, js, developer"></li>
                    <li class="ion-social-html5-outline" data-pack="social" data-tags="code, html, css, js, developer"></li>
                    <li class="ion-social-css3" data-pack="social" data-tags="code, html, css, js, developer"></li>
                    <li class="ion-social-css3-outline" data-pack="social" data-tags="code, html, css, js, developer"></li>
                    <li class="ion-social-javascript" data-pack="social" data-tags="code, html, css, js, developer"></li>
                    <li class="ion-social-javascript-outline" data-pack="social" data-tags="code, html, css, js, developer"></li>
                    <li class="ion-social-angular" data-pack="social" data-tags="code, mobile, js, angularjs, ionic"></li>
                    <li class="ion-social-angular-outline" data-pack="social" data-tags="code, mobile, js, angularjs, ionic"></li>
                    <li class="ion-social-nodejs" data-pack="social" data-tags="code, js, javascript, developer"></li>
                    <li class="ion-social-sass" data-pack="social" data-tags="code, css"></li>
                    <li class="ion-social-python" data-pack="social" data-tags="code"></li>
                    <li class="ion-social-chrome" data-pack="social" data-tags="code, mobile, js, angularjs, ionic"></li>
                    <li class="ion-social-chrome-outline" data-pack="social" data-tags="code, mobile, js, angularjs, ionic"></li>
                    <li class="ion-social-codepen" data-pack="social" data-tags="testing, js, developer"></li>
                    <li class="ion-social-codepen-outline" data-pack="social" data-tags="testing, js, developer"></li>
                    <li class="ion-social-markdown" data-pack="social" data-tags="code, testing, text, developer"></li>
                    <li class="ion-social-tux" data-pack="social" data-tags="code, linux, opensource"></li>
                    <li class="ion-social-freebsd-devil" data-pack="social" data-tags="code, opensource, unix"></li>
                    <li class="ion-social-usd" data-pack="social" data-tags="currency, trade, money, cash"></li>
                    <li class="ion-social-usd-outline" data-pack="social" data-tags="currency, trade, money, cash"></li>
                    <li class="ion-social-bitcoin" data-pack="social" data-tags="currency, trade, money"></li>
                    <li class="ion-social-bitcoin-outline" data-pack="social" data-tags="currency, trade, money"></li>
                    <li class="ion-social-yen" data-pack="social" data-tags="currency, trade, money, japanese"></li>
                    <li class="ion-social-yen-outline" data-pack="social" data-tags="currency, trade, money, japanese"></li>
                    <li class="ion-social-euro" data-pack="social" data-tags="currency, trade, money, europe"></li>
                    <li class="ion-social-euro-outline" data-pack="social" data-tags="currency, trade, money, europe"></li>
                  </ul>
                </section>
              </div>
              <!-- ms-paper-content -->
            </div>
            <!-- col-lg-9 -->
          </div>
          <!-- row -->
        </div>
        <!-- ms-paper -->
      </div>
      <!-- container -->
      <aside class="ms-footbar">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 ms-footer-col">
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title">Sitemap</h3>
                <ul class="list-unstyled ms-icon-list three_cols">
                  <li>
                    <a href="index.html">
                      <i class="zmdi zmdi-home"></i> Home</a>
                  </li>
                  <li>
                    <a href="page-blog.html">
                      <i class="zmdi zmdi-edit"></i> Blog</a>
                  </li>
                  <li>
                    <a href="page-blog.html">
                      <i class="zmdi zmdi-image-o"></i> Portafolio</a>
                  </li>
                  <li>
                    <a href="portfolio-filters_sidebar.html">
                      <i class="zmdi zmdi-case"></i> Works</a>
                  </li>
                  <li>
                    <a href="page-timeline_left2.html">
                      <i class="zmdi zmdi-time"></i> Timeline</a>
                  </li>
                  <li>
                    <a href="page-pricing.html">
                      <i class="zmdi zmdi-money"></i> Pricing</a>
                  </li>
                  <li>
                    <a href="page-about.html">
                      <i class="zmdi zmdi-favorite-outline"></i> About Us</a>
                  </li>
                  <li>
                    <a href="page-team2.html">
                      <i class="zmdi zmdi-accounts"></i> Our Team</a>
                  </li>
                  <li>
                    <a href="page-services.html">
                      <i class="zmdi zmdi-face"></i> Services</a>
                  </li>
                  <li>
                    <a href="page-faq2.html">
                      <i class="zmdi zmdi-help"></i> FAQ</a>
                  </li>
                  <li>
                    <a href="page-login2.html">
                      <i class="zmdi zmdi-lock"></i> Login</a>
                  </li>
                  <li>
                    <a href="page-contact.html">
                      <i class="zmdi zmdi-email"></i> Contact</a>
                  </li>
                </ul>
              </div>
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title">Subscribe</h3>
                <p class="">Lorem ipsum Amet fugiat elit nisi anim mollit minim labore ut esse Duis ullamco ad dolor veniam velit.</p>
                <form>
                  <div class="form-group label-floating mt-2 mb-1">
                    <div class="input-group ms-input-subscribe">
                      <label class="control-label" for="ms-subscribe">
                        <i class="zmdi zmdi-email"></i> Email Adress</label>
                      <input type="email" id="ms-subscribe" class="form-control"> </div>
                  </div>
                  <button class="ms-subscribre-btn" type="button">Subscribe</button>
                </form>
              </div>
            </div>
            <div class="col-lg-5 col-md-7 ms-footer-col ms-footer-alt-color">
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title text-center mb-2">Last Articles</h3>
                <div class="ms-footer-media">
                  <div class="media">
                    <div class="media-left media-middle">
                      <a href="javascript:void(0)">
                        <img class="media-object media-object-circle" src="assets/img/demo/p75.jpg" alt="..."> </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                        <a href="javascript:void(0)">Lorem ipsum dolor sit expedita cumque amet consectetur adipisicing repellat</a>
                      </h4>
                      <div class="media-footer">
                        <span>
                          <i class="zmdi zmdi-time color-info-light"></i> August 18, 2016</span>
                        <span>
                          <i class="zmdi zmdi-folder-outline color-warning-light"></i>
                          <a href="javascript:void(0)">Design</a>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="media">
                    <div class="media-left media-middle">
                      <a href="javascript:void(0)">
                        <img class="media-object media-object-circle" src="assets/img/demo/p75.jpg" alt="..."> </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                        <a href="javascript:void(0)">Labore ut esse Duis consectetur expedita cumque ullamco ad dolor veniam velit</a>
                      </h4>
                      <div class="media-footer">
                        <span>
                          <i class="zmdi zmdi-time color-info-light"></i> August 18, 2016</span>
                        <span>
                          <i class="zmdi zmdi-folder-outline color-warning-light"></i>
                          <a href="javascript:void(0)">News</a>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="media">
                    <div class="media-left media-middle">
                      <a href="javascript:void(0)">
                        <img class="media-object media-object-circle" src="assets/img/demo/p75.jpg" alt="..."> </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                        <a href="javascript:void(0)">voluptates deserunt ducimus expedita cumque quaerat molestiae labore</a>
                      </h4>
                      <div class="media-footer">
                        <span>
                          <i class="zmdi zmdi-time color-info-light"></i> August 18, 2016</span>
                        <span>
                          <i class="zmdi zmdi-folder-outline color-warning-light"></i>
                          <a href="javascript:void(0)">Productivity</a>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-5 ms-footer-col ms-footer-text-right">
              <div class="ms-footbar-block">
                <div class="ms-footbar-title">
                  <span class="ms-logo ms-logo-white ms-logo-sm mr-1">M</span>
                  <h3 class="no-m ms-site-title">Material
                    <span>Style</span>
                  </h3>
                </div>
                <address class="no-mb">
                  <p>
                    <i class="color-danger-light zmdi zmdi-pin mr-1"></i> 795 Folsom Ave, Suite 600</p>
                  <p>
                    <i class="color-warning-light zmdi zmdi-map mr-1"></i> San Francisco, CA 94107</p>
                  <p>
                    <i class="color-info-light zmdi zmdi-email mr-1"></i>
                    <a href="mailto:joe@example.com">example@domain.com</a>
                  </p>
                  <p>
                    <i class="color-royal-light zmdi zmdi-phone mr-1"></i>+34 123 456 7890 </p>
                  <p>
                    <i class="color-success-light fa fa-fax mr-1"></i>+34 123 456 7890 </p>
                </address>
              </div>
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title">Social Media</h3>
                <div class="ms-footbar-social">
                  <a href="javascript:void(0)" class="btn-circle btn-facebook">
                    <i class="zmdi zmdi-facebook"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-twitter">
                    <i class="zmdi zmdi-twitter"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-youtube">
                    <i class="zmdi zmdi-youtube-play"></i>
                  </a>
                  <br>
                  <a href="javascript:void(0)" class="btn-circle btn-google">
                    <i class="zmdi zmdi-google"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-instagram">
                    <i class="zmdi zmdi-instagram"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-github">
                    <i class="zmdi zmdi-github"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </aside>
      <footer class="ms-footer">
        <div class="container">
          <p>Copyright &copy; Material Style 2017</p>
        </div>
      </footer>
      <div class="btn-back-top">
        <a href="#" data-scroll id="back-top" class="btn-circle btn-circle-primary btn-circle-sm btn-circle-raised ">
          <i class="zmdi zmdi-long-arrow-up"></i>
        </a>
      </div>
    </div>
    <!-- ms-site-container -->
    <div class="ms-slidebar sb-slidebar sb-left sb-style-overlay" id="ms-slidebar">
      <div class="sb-slidebar-container">
        <header class="ms-slidebar-header">
          <div class="ms-slidebar-login">
            <a href="javascript:void(0)" class="withripple">
              <i class="zmdi zmdi-account"></i> Login</a>
            <a href="javascript:void(0)" class="withripple">
              <i class="zmdi zmdi-account-add"></i> Register</a>
          </div>
          <div class="ms-slidebar-title">
            <form class="search-form">
              <input id="search-box-slidebar" type="text" class="search-input" placeholder="Search..." name="q" />
              <label for="search-box-slidebar">
                <i class="zmdi zmdi-search"></i>
              </label>
            </form>
            <div class="ms-slidebar-t">
              <span class="ms-logo ms-logo-sm">M</span>
              <h3>Material
                <span>Style</span>
              </h3>
            </div>
          </div>
        </header>
        <ul class="ms-slidebar-menu" id="slidebar-menu" role="tablist" aria-multiselectable="true">
          <li class="card" role="tab" id="sch1">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc1" aria-expanded="false" aria-controls="sc1">
              <i class="zmdi zmdi-home"></i> Home </a>
            <ul id="sc1" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch1">
              <li>
                <a href="index.html">Default Home</a>
              </li>
              <li>
                <a href="home-generic-2.html">Home Black Slider</a>
              </li>
              <li>
                <a href="home-landing.html">Home Landing Intro</a>
              </li>
              <li>
                <a href="home-landing3.html">Home Landing Video</a>
              </li>
              <li>
                <a href="home-shop.html">Home Shop 1</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch2">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc2" aria-expanded="false" aria-controls="sc2">
              <i class="zmdi zmdi-desktop-mac"></i> Pages </a>
            <ul id="sc2" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch2">
              <li>
                <a href="page-about.html">About US</a>
              </li>
              <li>
                <a href="page-team.html">Our Team</a>
              </li>
              <li>
                <a href="page-product.html">Products</a>
              </li>
              <li>
                <a href="page-services.html">Services</a>
              </li>
              <li>
                <a href="page-faq.html">FAQ</a>
              </li>
              <li>
                <a href="page-timeline_left.html">Timeline</a>
              </li>
              <li>
                <a href="page-contact.html">Contact Option</a>
              </li>
              <li>
                <a href="page-login.html">Login</a>
              </li>
              <li>
                <a href="page-pricing.html">Pricing</a>
              </li>
              <li>
                <a href="page-coming.html">Coming Soon</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch4">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc4" aria-expanded="false" aria-controls="sc4">
              <i class="zmdi zmdi-edit"></i> Blog </a>
            <ul id="sc4" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch4">
              <li>
                <a href="blog-sidebar.html">Blog Sidebar 1</a>
              </li>
              <li>
                <a href="blog-sidebar2.html">Blog Sidebar 2</a>
              </li>
              <li>
                <a href="blog-masonry.html">Blog Masonry 1</a>
              </li>
              <li>
                <a href="blog-masonry2.html">Blog Masonry 2</a>
              </li>
              <li>
                <a href="blog-full.html">Blog Full Page 1</a>
              </li>
              <li>
                <a href="blog-full2.html">Blog Full Page 2</a>
              </li>
              <li>
                <a href="blog-post.html">Blog Post 1</a>
              </li>
              <li>
                <a href="blog-post2.html">Blog Post 2</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch5">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc5" aria-expanded="false" aria-controls="sc5">
              <i class="zmdi zmdi-shopping-basket"></i> E-Commerce </a>
            <ul id="sc5" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch5">
              <li>
                <a href="ecommerce-filters.html">E-Commerce Sidebar</a>
              </li>
              <li>
                <a href="ecommerce-filters-full.html">E-Commerce Sidebar Full</a>
              </li>
              <li>
                <a href="ecommerce-filters-full2.html">E-Commerce Topbar Full</a>
              </li>
              <li>
                <a href="ecommerce-item.html">E-Commerce Item</a>
              </li>
              <li>
                <a href="ecommerce-cart.html">E-Commerce Cart</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch6">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc6" aria-expanded="false" aria-controls="sc6">
              <i class="zmdi zmdi-collection-image-o"></i> Portfolio </a>
            <ul id="sc6" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch6">
              <li>
                <a href="portfolio-filters_sidebar.html">Portfolio Sidebar Filters</a>
              </li>
              <li>
                <a href="portfolio-filters_topbar.html">Portfolio Topbar Filters</a>
              </li>
              <li>
                <a href="portfolio-filters_sidebar_fluid.html">Portfolio Sidebar Fluid</a>
              </li>
              <li>
                <a href="portfolio-filters_topbar_fluid.html">Portfolio Topbar Fluid</a>
              </li>
              <li>
                <a href="portfolio-cards.html">Porfolio Cards</a>
              </li>
              <li>
                <a href="portfolio-masonry.html">Porfolio Masonry</a>
              </li>
              <li>
                <a href="portfolio-item.html">Portfolio Item 1</a>
              </li>
              <li>
                <a href="portfolio-item2.html">Portfolio Item 2</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="link" href="component-typography.html">
              <i class="zmdi zmdi-view-compact"></i> UI Elements</a>
          </li>
          <li>
            <a class="link" href="page-all.html">
              <i class="zmdi zmdi-link"></i> All Pages</a>
          </li>
        </ul>
        <div class="ms-slidebar-social ms-slidebar-block">
          <h4 class="ms-slidebar-block-title">Social Links</h4>
          <div class="ms-slidebar-social">
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-facebook">
              <i class="zmdi zmdi-facebook"></i>
              <span class="badge-pill badge-pill-pink">12</span>
              <div class="ripple-container"></div>
            </a>
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-twitter">
              <i class="zmdi zmdi-twitter"></i>
              <span class="badge-pill badge-pill-pink">4</span>
              <div class="ripple-container"></div>
            </a>
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-google">
              <i class="zmdi zmdi-google"></i>
              <div class="ripple-container"></div>
            </a>
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-instagram">
              <i class="zmdi zmdi-instagram"></i>
              <div class="ripple-container"></div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <script src="assets/js/plugins.min.js"></script>
    <script src="assets/js/app.min.js"></script>
    <script src="assets/js/configurator.min.js"></script>
    <script>
      (function(i, s, o, g, r, a, m)
      {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function()
        {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
          m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
      ga('create', 'UA-90917746-2', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>